1.1 路由传参
1.1.1 query
xxx.vue
<button @click="showAbout">About</button>
-----------------------------------------------------------
methods:{
showAbout () {
this.$router.push({
path: `about`,
query:{
id:1 //通过query传参
}
})
}
}
about.vue
console.log(this.$route.query.id); //通过$route拿到传递过来的参数
1.2.1 params
xxx.vue
<button @click="showAbout">About</button>
-----------------------------------------------------------
methods:{
showAbout () {
this.$router.push({
//path: `about`,注意:通过params传参不能写path的形式，需要通过name来找到路由
name:'about'
params:{
id:2 //通过params传参
}
})
}
}
router/index.js
{
path: "/about",
name:'about',//通过name来标识
component: About
},
about.vue
console.log(this.$route.params.id)
1.2.1 props
xxx.vue
this.$router.push({
path: `about`,
query:{
id:1
}
})
------------------------
this.$router.push({
path: `about`,
params:{
name:'foo'
}
})
router/index.js
{
path: "/about",
component: About,
props(route) { //以函数的形式接收，query，params都可以
return {
id: route.query.id,
id: route.params.name,
};
}
},
about.vue
//在页面中通过props接收
props:['id','name'] //1,foo
2.1 meta
定义：路由元数据，用来定义路由身上携带的信息。
router/index.js
{
path: "/about",
component: About,
meta:{
isLogin:true,
title:'hello'
}
},
2.1.1 使用场景
登录校验
router.beforeEach((to, from ,next) => {
console.log(to.meta.isLogin); //判断是否是登录页面
console.log(to.meta.title); //找到title
})
3.1 缓存路由组件
3.1.1 作用
让不展示的路由组件保持挂载，不被销毁。
<keep-alive include="About"> //include是不被销毁的组件，News是组件名
<router-view></router-view>
</keep-alive>
xxx.vue
export default {
props:['id'],
name:'About',//include中的组件名指的是这个
}
4.1 路由组件独有的生命周期
activated和deactivated分别为激活和失活钩子，注意：他们的组件必须包含在keep-alive标签中，否则无效。
xxx.vue
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
about.vue
activated () {
console.log('激活');
},
deactivated () {
console.log('失活');
}
5.1 路由守卫
5.1.1 全局路由守卫（也叫导航）
router/index.js
//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
to //进入到哪一个路由
from //从哪一个路由离开
next //往下执行（放行）
})
//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
to //进入到哪一个路由
from //从哪一个路由离开
})
5.1.2 独享守卫
router/index.js
//直接写到配置路由的地方
{
name:'about',
path:'/about',
component:About,
beforeEnter: (to, from, next) => {
}
},
5.1.3 组件内守卫
xxx.vue //写到某个组件内
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}
如果觉得有帮助欢迎点赞、评论。 上述内容仅仅代表个人观点，如有错误，请指正。如果你也对前端感兴趣，欢迎访问我的个人博客sundestiny.github.io/myblog/
