VUE解决路由守卫白屏

next 介绍

  1. 但凡涉及到有参数的钩子,必须调用next()才能继续往下执行下一个钩子,否则路由跳转等会停止。
  2. 如果要中断当前的导航要调用next(false)。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from路由对应的地址。(主要用于登录验证不通过的处理)
  3. 当然next可以这样使用,next('/')或者 next({ path: '/' }) 跳转到一个不同的地址。意思是当前的导航被中断,然后进行一个新的导航。可传递的参数与router.push中选项一致。
  4. 在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm,这个回调函数在生命周期mounted之后调用,也就是,他是所有导航守卫和生命周期函数最后执行的那个钩子。
const router = new Router({
nroutes:[]
//beforEach全局前置守卫
//to目标路由对象
//from即将要离开的路由对象
//next它是最重要的一个参数,相当于佛珠的线,把一个一个珠子逐个串起来。
router.beforeEach((to, from, next) => {
  try {
    let uid = localStorage.getItem('uid');
    if (uid) {
      next('/manage/dhcpOption')
    } else {
      //没有登录,判断跳转地址是否为login,防止白屏
      if (to.path === '/login') {
        next();
      } else {
        next({
          path: '/login'
        } );
      }
    }
  } catch (err) {
    console.error(err);
  }
})
export default router;
})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。