VUE的路由守卫机制 ## 有的时候，我们需要通过路由来进行一些权限的验证，比如说对于登录注册的使用,以及对于本地是否储存你所需要的账号密码进行一个验证,当用户满足条件时，你就可以根据你的需求进行跳转页面，反之，不行
vue的路由守卫大致分为三类,一种是全局的,一种是局部的,还有一种是通过组件级别的
Vue-Router导航守卫：
vue-router全局有三个守卫：
-
router.beforeEach 全局前置守卫 进入路由之前
-
router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
-
router.afterEach 全局后置钩子 进入路由之后
// main.js 入口文件 import router from './router'; // 引入路由 router.beforeEach((to, from, next) => { next(); }); router.beforeResolve((to, from, next) => { next(); }); router.afterEach((to, from) => { console.log('afterEach 全局后置钩子'); });
to,from,next 这三个参数：
to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。
next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
- next() 进入该路由。
- next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。
- next 跳转新路由，当前的导航被中断，重新开始一个新的导航。
我们可以这样跳转：next('path地址')或者next({path:''})或者next({name:''})
且允许设置诸如 replace: true、name: 'home' 之类的选项
以及你用在router-link或router.push的对象选项。
路由独享守卫
如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
// ...
}
}
]
})
