路由守卫# 路由守卫
1.作用：对路由进行权限控制 2.分类：全局守卫、独享守卫、组件内守卫 3.next()函数为放行函数，next(false)表示路由跳转时强制返回当前路由（即跳转前的路由）
# 前置配置
// 创建并暴露一个路由器
const router = new VueRouter({
routes: [
{//一路径对应一组件
// 路由取名
name: "about",
path: '/About',
component: About
},
{
name: "home",
path: '/Home',
component: Home,
children: [//表示二级路由
{
name: "news",
path: 'News',
component: News,
// meta为路由元信息，可以在该属性里自定义属性
meta: { isAuto: true }
},
{//二级路由地址前面不能加/
name: "message",
path: 'Message',
component: Message,
children: [
{
name: 'detail',
// path:'Detail',
path: 'Detail/:id/:title',//其中后面两个是占位符，是为了辨别params参数
component: Detail,
// props的第一种写法，对象形式，该对象中的所有key-value都会以props的形式传给detail组件，用的比较少
// props:{a:1,b:"200"}
// props的第二种写法，布尔值形式，若props为true则会把该路由组件收到的所有params参数都以props方式传给detail组件
// props:true
// props的第三种写法，函数形式，会把该路由组件收到的所有params或query参数都以props方式传给detail组件
props($route) {
return {
id: $route.params.id, title: $route.params.title
}
}
// props({ query: { id, title } }) {//第三种写法的连续解构赋值写法
// return {
// id, title
// }
// }
}
]
},
]
},
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
# 全局路由守卫（beforeEach，afterEach）
//全局前置路由守卫，在初始化和路由切换之前调用该函数
router.beforeEach((to, from, next) => {//next是一个函数调用它表示允许跳转
console.log(to, from)//前往哪个路由，从哪个路由
if (to.meta.isAuto) {//判断是否有isAuto属性用于鉴权
if (localStorage.getItem('name') === "张") { next() } else { alert('无权限观看') }
} else { next() }
})
//全局后置路由守卫
router.afterEach((to, from) => {//由于是切换后调用该函数，所以相比前置路由它没有next函数
console.log(to, from)
document.title = to.name })
export default router
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 独享路由守卫（beforeEnter，没有后置）
以news路由为例
{//语法和前置全局一致，区别只是对所在路由进行了限制
name: "news",
path: 'News',
component: News,
// meta为路由元信息，可以在该属性里自定义属性
meta: { isAuto: true }，
beforeEnter:(to, from, next) => {//next是一个函数调用它表示允许跳转
console.log(to, from)//前往哪个路由，从哪个路由
if (to.meta.isAuto) {//判断是否有isAuto属性用于鉴权
if (localStorage.getItem('name') === "张") { next() } else { alert('无权限观看') }
} else { next() }
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 组件内路由 （beforeRouterEnter,beforeRouterleave）
区别于全局路由，没有前置和后置之分，一次操作只可能触发进入或离开 最近新增了第三个路由守卫beforeRouterUpdata
beforeRouteEnter (to, from, next) {//通过路由规则进入该组件时被调用
// ...
},
beforeRouteLeave (to, from, next) {//通过路由规则离开该组件时被调用
// ...
}
1
2
3
4
5
6
2
3
4
5
6