首先,了解什么是路由守卫,拿来做什么
在项目中,没次路由的切换或者页面的刷新都需要我们判断用户是否已经登录;
而vue-router提供了导航钩子:
全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach,这两钩子函数会在路由即将改变前和改变后进行触发;
当然有全局的也有独享的,他需要在路由配置的时候进行配置;
还有组件路由守卫,他是写在每个单独的vue文件里面的路由守卫。
这里还要说到导航钩子提供的三个参数:
to:即将要进入的目标路由对象;
from:当前导航即将要离开的路由对象;
next :只有在调用该方法后,路由才会改变,才能进入下一个钩子函数(afterEach)。
注意:
扫描二维码关注公众号,回复:
11278767 查看本文章
next()//直接进to 所指路由 next(false) //中断当前路由 next('/login') //跳转指定路由
1. 路由独享守卫
export default new VueRouter({ routes: [ { path: '/', name: 'home', component: 'Home', beforeEnter: (to, from, next) => { // 需要的操作 } } ] })
2. 组件路由守卫
// 跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫 beforeRouteEnter (to, from, next) { // 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过vm来访问组件实例 next(vm => {}) } beforeRouteUpdate (to, from, next) { // 同一页面,刷新不同数据时调用, } beforeRouteLeave (to, from, next) { // 离开当前路由页面时调用 }
3. 全局路由守卫
前置守卫:一般会用来判断用户是否登录,未登录则跳转登录页
router.beforeEach(async (to, from, next) => { clearHttpRequestingList(); let sessionId = localStorage.getItem('sessionId') || ''; NProgress.start(); if (sessionId) { //已登录 next() } else { //未登录定向到登录页面 if( to.path == '/login') { next(); } else { next('/login') } } })
后置守卫:和beforeEach不同的是afterEach不接收第三个参数 next 函数,也不会改变导航本身
router.afterEach((to, from) => { // finish progress bar NProgress.done() })