vue路由守卫 beforeEach、钩子

描述：咱们在开发中，常常会遇到，进入登陆页面与主页面的判断，一般后台会传回一个session来判断，如今就考虑下有多少中方法来实现这种效果；

1.之前用的方法是直接在app.vue入口文件来判断跳转登陆页面，仍是主页面，
优势：简单明了，直接根据是否存在session来判断入口文件是登陆仍是主页面；

缺点：体验感很差，每次判断前都会有登陆页面出现一下，再跳转主页面，

 
2.用动态路由，判断用户是否登陆跳转登陆页面仍是主页面，判断管理员权限，判断页面是否存在，不存在跳转404页面，
优势：能适用多钟状况，体验感好，

在main.js  或router.js添加

router.beforeEach((to, from, next) => {
　　console.log(store.state.token)
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 必定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
　　const route = ['index', 'list'];
　　let isLogin = store.state.token; // 是否登陆
// 未登陆状态；当路由到route指定页时，跳转至login
　　if (route.indexOf(to.name) >= 0) {
　　　　if (isLogin == null) {
　　　　　　router.push({ path: '/login', });
　　　　}
　　}
// 已登陆状态；当路由到login时，跳转至home 
　　console.log(to.name)
　　localStorage.setItem('routerName', to.name)
　　if (to.name === 'login') {
　　　　if (isLogin != null) {
　　　　　　router.push({ path: '/HomeMain', });;
　　　　}
　　}
　　next();
});

 

在这里讲下路由的钩子函数：

路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的

整体来说vue里面提供了三大类钩子
一、全局钩子
二、某个路由独享的钩子
三、组件内钩子

1.全局钩子
主要包括beforeEach和aftrEach,

beforeEach函数有三个参数：
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，若是执行完了，则导航的状态就是 confirmed （确认的）；不然为false，终止导航。
    afterEach函数不用传next()函数
这类钩子主要做用于全局,通常用来判断权限,以及以及页面丢失时候须要执行的操做,例如就像上面的

router.beforeEach((to, from, next) => {
console.log(store.state.token)
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 必定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
const route = ['index', 'list'];
let isLogin = store.state.token; // 是否登陆
// 未登陆状态；当路由到route指定页时，跳转至login
if (route.indexOf(to.name) >= 0) {
if (isLogin == null) {
router.push({ path: '/login', });
}
}
// 已登陆状态；当路由到login时，跳转至home 
console.log(to.name)
localStorage.setItem('routerName', to.name)
if (to.name === 'login') {
if (isLogin != null) {
router.push({ path: '/HomeMain', });;
}
}
next();
});

 

2.某个路由独享钩子
就像说的同样，给某个路由单独使用的，本质上和后面的组件内钩子是同样的。都是特指的某个路由。不一样的是，这里的通常定义在router当中，而不是在组件内。以下

 {
path: '/dashboard',
component: resolve => require(['../components/page/Dashboard.vue'], resolve),
meta: { title: '系统首页' },
beforeEnter: (to, from, next) => {

},
beforeLeave: (to, from, next) => {

}

},

 

3.组件路由
主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也能够传三个参数(to,from,next),做用与前面相似.

beforeRouteLeave(to, from, next) {
// ....
next()
},
beforeRouteEnter(to, from, next) {
// ....
next()
},
beforeRouteUpdate(to, from, next) {
// ....
next()
},
computed: {},
method: {}

 

最后看看官网介绍

to: Route:              //即将要进入的目标 路由对象
from: Route:          //当前导航正要离开的路由
next: Function:       //必定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next():                  //进行管道中的下一个钩子。若是所有钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false):           //中断当前的导航。若是浏览器的 URL 改变了（多是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’)               //或者 next({ path: ‘/’ }): 跳转到一个不一样的地址。当前的导航被中断，而后进行一个新的导航。

 

最后一点，关于页面不存在，跳转404页面

因为router自己的匹配是从上到下的，若是在前面找到了匹配的路由，就跳转了。所以能够直接在最后添加404的路由，以下

let routerConfig = [{
path: '/pages',
component: App,
children: [{
path: 'demo/step1/list',
component: coupon,
name: 'coupon-list',
meta: {
title: '红包'
}
}]
}, {
path: '*',
component: NotFound,
name: 'notfound',
meta: {
title: '404-页面丢了'
}
}]

-----------END----------

———————————————— 原文连接：https://blog.csdn.net/dwb123456123456/article/details/85317136