路由守卫钩子介绍
const router = new VueRouter({ ... })
// 导航路由变化时触发路由守卫钩子
router.beforeEach((to, from, next) => {
// ...
})
to: Route: 即将要进入的目标路由对象(到哪去)from: Route: 当前导航正要离开的路由(从哪来)next: Function(必须）: resolve 钩子(学过promise的应该知道),执行效果依赖next方法的调用参数，有参和无参数含义不同。(放行到哪)
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (意思就是确认放行)。
next(false):中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址 (从哪来的回哪里去)next('/')或者next({ path: '/' }): 跳转到一个不同的地址(放行到哪个地方)。当前的导航被中断，然后进行一个新的导航(结束当前钩子函数，重新运行钩子函数)。 它允许你传递一个路由对象，其中可以包含更多的配置选项，比如path、name、params、query等
注意：
①next('/')或者next({ path: '/' })效果是一样的后者是前者的简写，一般是放行到根路径下(router中可配置根路径)
②next({})的参数中国农还可以包含更多的配置选项比如path、name、params、query等// 带查询参数
next({ path: '/', query: { userId: 123 } })// 或者使用命名路由和路由参数
next({ name: 'user', params: { userId: 123 } })③to的path内如果是个 '/'表示之前的路由是根路径或者没有上一个路由。
错误案例
记录造成跳转路径无限循环案例：
举例1：
// 下面的写法会死循环
beforeRoute (to, from, next) {
console.log('离开路路由')
next('/home')
}
// 正确写法
beforeRoute (to, from, next) {
console.log('离开路路由')
if(to.fullPath==='/home'){
next();
return;
}else{
next('/home')
}
解释：
vue-router的next()方法无参和有参时是不一样的
比如当 to.path=/a时，遇到了next("/home")时
①会中断当前 to /a 的这当前导航
②将 to.path改为"/home"即(/a 改为 /home)
③此时重新触发钩子函数beforeRouteLeave(从头重新执行)
钩子函数中return作用
router.beforeEach ((to,from,next) => {
//将所有需要登陆才显示的页面的路由都放进一个数组
const nextRoute = ['index', 'library', 'design', 'administration', 'production'];
//获取登陆状态
let isLogin = Global.isLogin
if(to.name === 'login') { //如果是登录页，则跳过验证
next() //必不可少
return //以下的代码不执行
}
if(nextRoute.indexOf(to.name) >= 0) { //判断该页面是否需要登陆
if(!isLogin) { //判断登陆状态
next({ name : 'login'}) //如果未登录，则跳转到登录页
} else {
next() //如果已经登陆，那就可以跳转
}
} else { //其他的无需登陆的页面不做验证
next()
}
})这里的return 起的作用:
首先要知道return 在一个函数中遇到会立刻中断函数执行将return后的内容作为函数的返回值(return后的代码不在执行--这个不解释了很基础)
to.name === 'login'为真时，意味着用户正在尝试访问登录页面。在这种情况下，我们不需要进行任何进一步的检查，因此我们调用next()来继续路由导航，并通过return语句立即结束beforeEach函数的执行。如果不使用
return，代码将会继续执行后续的条件检查，这是不必要的，因为我们已经决定允许用户访问登录页面。即 如果不加return 下面代码还是会执行if(nextRoute.indexOf(to.name) >= 0) { //判断该页面是否需要登陆
// ... 省略了其他代码 ...
}
