目录
2、路由中的props第二中写法(布尔类型):(配合params参数,path中不用再标识params参数占位符)
3、路由中的第三种写法(函数类型): (配合params或query)(返回值中配置return:{key:value})
3、独享路由守卫(beforeEnter)(直接配置在路由中)
实现单页面应用 页面跳转只是局部刷新 路由是一组key-value的对应关系
1、安装:npm i vue-router
2、main.js 中:
import VueRouter from ' vue-router' //引入配置
//配置路由插件 Vue.use(VueRoter)
//引入已经配置好的路由路由 import router from './router' //引入 new Vue({ ... router, ... })
3、配置router
创建router/index.js
//创建一个路由器 (自定义配置组件路径请求
export default new VueRouter({
routers:[
{
path:'/about', //路径请求
component:About //对应组件
},
{
path:'/home',
component:Home
},
]
})
在APP中使用
<!-- 路由跳转 标签 本质上是a标签-->
<router-link to="/about" active-class="">About</router-link>
<!-- 被激活时候的样式 伪类 active-class=""-->
<div>
<!-- 呈现路由组件 占位-->
<router-view></router-view>
</div>
创建pages文件夹存放路由组件 通过切换 组件 销毁--挂载 每个组件都有自己的$route属性,里面储存自己的路由信息 整个路由只有一个router 可以通过组件的$router获取
使用路由内部 children[{},{}] 配置子路由
注意子路由前面不要加 / 跳转路径要写全:<router-link to="/home/msg">msg</router-link>
//创建一个路由器
export default new VueRouter({
routers:[
{
path:'/about', //路径
component:About //对应组件
},
{
path:'/home',
component:Home,
children:[ //通过children 设置子路由
{ //二级路由
path:'news', //此处一定不要写 /news
component:news,
},
{ //二级路由
path:'msg',
component:message,
},
]
},
]
})
作用:简化路由的跳转路径 to 内部的path属性可以换成name来指定跳转位置
{ //二级路由
path:'msg',
component:message,
children:[
{
name:'gunyu',
path:'detail', //此处一定不要写 /news
component:Detail
}
]
},
//使用name指定跳转模块
<router-link :to="{
name:'gunyu',
query:{
id:m.id,
title:m.title
}
}">{{m.title}}</router-link>
不传参数 :<router-link :to="{name:'gunyu'}" > 跳转</router-link>
to前加不加 : 取决于用需不需当作代码段解析
跳转路由并携带query参数,to的字符串写法(需要内部嵌套ES6字符串模板语法 `` )( :to="`/xx?id=${xx} `" )
<router-link :to="`/home/msg/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>
跳转路由并携带query参数, to的对象写法 ( :to="{ path:'', query:{} }" )
<router-link :to="{
path:'/home/msg/detail',
query:{
id:m.id,
title:m.title
}
}">{{m.title}}</router-link>
组件中接收参数:this.$route.query.id 或 {{$route.query.id}}
声名路由的时候需要占位(路径 /:xx)
{ //二级路由
path:'msg',
component:message,
children:[
{
name:'gunyu',
path:'detail/:id/:title', //此处一定不要写 /news
component:Detail
}
]
},
<!-- 跳转路由并携带params参数, to的字符串写法-->
<router-link :to="`/home/msg/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
跳转路由并携带params参数, to的对象写法(不能使用path)(必须使用name来跳转)
<router-link :to="{
name:'gunyu',
params:{
id:m.id,
title:m.title
}
}">{{m.title}}</router-link>
组件接收params参数 :this.$route.params.id 或 {{$route.params.id}}
让组件更方便接收参数 组件接收参数直接使用 props接收即可 ,不要再通过this.$route
发送固定参数
{ //二级路由
path:'msg',
component:message,
children:[
{
name:'gunyu',
path:'detail/:id/:title', //此处一定不要写 /news
component:Detail,
// pros 的第一种写法 ,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件,组件中也用props接收 props:['a','b']
props:{a:1,b:'hell'}
}
]
},
组件中也用props接收 props:['a','b']
配合params方式传参数使用
配置路由时候path 路径不用再使用占位
{ //二级路由
path:'msg',
component:message,
children:[
{
name:'gunyu',
path:'detail',
component:Detail,
//pro的第二种写法 收到路径的params参数 以props形式发出 path路径中就不用在配置占位 组件中接收即可 props:['id','title']
props:true
}
]
},
(配合params或query)(返回值中配置return:{key:value})
{ //二级路由
path:'msg',
component:message,
children:[
{
name:'gunyu',
path:'detail',
component:Detail,
//props的第三种写法,值为函数 组件中接收即可 props:['id','title']
props($route){
return {id:$route.query.id,title:$route.query.title}
}
//或者写成结构赋值
// props({query}){
// return {id:query.id,title:query.title}
// }
}
]
},
replace 模式 不能 回退 push 默认模式 可以回退
作用不借助 <router-link>实现路由跳转,让路由更加灵活 借助路由api
$router.push() : 跳转位置 (push模式会产生历史记录) $router.replace() : 跳转位置 (replace模式,不会参数历史记录)
pushShow(m){ // 不使用router-link 标签实现跳转 使用路由push(会产生历史记录)
this.$router.push({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
},
$router.replace() : 跳转位置 (replace模式,不会参数历史记录)
replaceShow(m){ //使用replace模式跳转(不会产生历史记录即不能回退)
this.$router.replace({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
}
使用路由aip this.$router.back();//回退 this.$router.forward()// 前进 //this.$router.go(-1);//回退一步 this.$router.go(3);//前进三步
阻止组件切换时被销毁
<keep-alive> 标签包裹 <router-view> 标签
include属性 include="News" 属性的值为需要缓存的组件(vc)的name属性,当不设置include时候 ,默认存储全部 作用:让展示的路由组件保持挂载,不被销毁,(input 输入内容不会被清除)
缓存数据 不销毁
include 属性的值为需要缓存的组件(vc)的name属性
<keep-alive include="News">
<!-- 路由占位-->
<router-view></router-view>
</keep-alive>
缓存全部: 默认缓存全部 <keep-alive>
缓存多个:写成数组形式 <keep-alive :include="['a','b']">
作用:用于捕获路由组件的激活状态,可用来关闭或打开一些数据(防止<keep-alive> 后数据不能销毁)
activated:用于路由组件被激活时触发 deactivated:用于路由组件失活时促发
例如:
activated() { //组件被激活 (被路由跳转到当前组件),
console.log("news组件被激活了")
},
deactivated() { //组件被路由切换后的钩子,解决缓存后不能停止问题
console.log("news组件失活了")
}
--- 初始化的时候被调用、在每一次路由切换之前的操作
router 为路由
router.beforeEach((to,from,next)=>{}); to 目标路由信息 from 当前页面路由信息 next() 放行,执行完才能跳转
router.beforeEach((to,from,next)=>{
//to 目标路由信息
//from 当前页面路由信息
//next() 放行
if(to.meta.isAuth){
next();//有权限就放行
}
});
---初始化的时候被调用、每次路由切换成功(next()执行之后)之后被调用
// next()执行后执行
router.afterEach((to,from)=>{
document.title=to.meta
})
// beforeEnter
{
name:'xhs',
path:'/about', //路径
component:About,//对应组件
meta:{isAuth:false}, //用于自定义key-value 数据, ,用于自定义(路由守卫)权限校验
beforeEnter:(to,from,next)=>{
//独享前置守卫 只对当前做限制
next();
}
},
有点类似前面两个钩子( activated、deactivated)
想使用组件内容做判断时候使用,和独享守卫有点区别
//通过路由规则,进入时被调用
beforeRouteEnter(to,from,next){
next();
},
//通过路由规则,离开该组件时被调用
beforeRouteLeave(to,from,next){
next();
}
在路由中可以配置meta属性, 自定义 key-value 数据 meta:{isAuth:false} //用于自定义key-value 数据, ,用于自定义(路由守卫)权限校验
总路由mode属性 mode: hash 默认 ==> /#/ 兼容性好 后面内容不会带个服务器 histoy ==> / 后面请求会发送给服务器从而出现404 打包后打开刷新会出现404 (需要后端解决请求问题)
打包成静态文件 命令npm run build
本质是插件引入 移动端: Vant、Cube UI、Mint UI PC端: Element UI、 IView UI