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、全局钩子
2、某个路由独享的钩子
3、组件内钩子

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

posted on 2019-08-20 18:47 vneel 阅读(30737) 评论(0) 编辑收藏举报

刷新页面返回顶部

vneel

vue路由守卫 beforeEach、钩子

导航

公告