vue中页面跳转拦截器的实现方法

首先对index.js的router进行配置;

export default new Router({ 
 routes: [ 
  { 
   path: '/consultancy', 
   name: 'consultancy', 
   meta: { 
    requireAuth: true // 配置此条，进入页面前判断是否需要登陆 
   }, 
   component: selfcenter 
  } 
 ] 
})

定义完路由后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (localStorage.getItem("userid")!=null ) { // 通过vuex state获取当前的userid是否存在
      next();
    } else {
      next({
        path: './',
        query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }
})