Vue全局路由守卫

全局路由守卫：

1. to : 即将要进入的目标 路由对象
2. from : 当前导航正要离开的路由
3. next : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数（是否接着往下执行，若不写next（），则页面不会往下执行，必写）。

//router/index.js路由文件
//语法：
router.beforeEach((to, from, next) => {
    //...
  next()
})
//使用：
router.beforeEach((to, from, next) => {
   //我在这里模仿了一个获取用户信息的方法
   let isLogin = window.sessionStorage.getItem('userInfo');
   if (isLogin) {
      //如果用户信息存在则往下执行。
     next()
   } else {
     //如果用户token不存在则跳转到login页面
     if (to.path === '/login') {
        next()
      } else {
       next('/login')
      }
} 
  next()
})

router.beforeEach((to,from,next)=> { 
  let isLogin = localStorage.username
  if(to.meta.guard){  //判断是否为true
    if(isLogin){  判断是否为true
      next()
    }else{
      next('/')//不为true跳转到登录页面
    }
  }else{
    next()//不为true往下执行
  }
})
{    
  path:'/tablelist',
  component:tablelist,
  meta:{guard:true} //如果为true的话就进行路由守卫如果不为true的话就不进行路由守卫
}