什么是路由守卫？
路由守卫就是路由跳转的一些验证，比如登录鉴权（没有登录不能进入个人中心页）等等等。
路由守卫分为三大类：
-
全局守卫：
beforeEach -
路由独享的守卫：
beforeEnter -
组件内的守卫：
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
每个守卫方法接收三个参数：
to： 要进入的目标路由（去哪儿）from： 要离开的路由（从哪来）next： 是否进行下一步（要不要继续）
next函数具体使用方法：
全局守卫
1.在路由的js文件导入VUE路由对象并挂载
import Router from 'vue-router'
Vue.use(Router)
2.创建路由实例
给需要守卫的路由加上： meta: { permission: true },
const router = new Router({
routes: [
{
path: '/', redirect: '/login' },
{
path: '/login', component: Login },
{
path: '/home', component: Home,meta: {
permission: true }}
]
})
3.挂载路由导航守卫
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
if (to.meta.permission) {
if (sessionStorage.getItem("token")) {
next();
} else {
alert("请先登录");
next("/login");
}
} else {
next();
}
});
4.导出路由
export default router
单个路由守卫
你可以在路由配置上直接定义 beforeEnter 守卫：
const router = new Router({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
if (sessionStorage.getItem("token")) {
next();
} else {
alert("请先登录");
next("/login");
}
}
}
]
})
这些守卫与全局前置守卫的方法参数是一样的。
组件内部守卫
在组件内部使用，和data、created、mounted、methods处于平等关系
用beforeRouteEnter举例说明：
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
if (sessionStorage.getItem("token")) {
next();
} else {
alert("请先登录");
next("/login");
}
},