其他分享
首页 > 其他分享> > vue3全局路由导航首位

vue3全局路由导航首位

作者:互联网

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

全局的前置守卫beforeEach是在导航触发时会被回调的:
它有两个参数:to:即将进入的路由Route对象;from:即将离开的路由Route对象;
它有返回值:false:取消当前导航;不返回或者undefined:进行默认导航;
返回一个路由地址:可以是一个string类型的路径;可以是一个对象,对象中包含path、query、params等信息;
可选的第三个参数:next
在Vue2中我们是通过next函数来决定如何进行跳转的;
但是在Vue3中我们是通过返回值来控制的,不再推荐使用next函数,这是因为开发中很容易调用多次next;

 

在router目录下的index.js中加入如下语句 

// 全局导航守卫
router.beforeEach((to, from) => {
  console.log('to', to)
  console.log('from', from)
  if (to.path !== '/login') {
    const token = localStorage.getItem('token')
    if (!token) {
      return '/login'
    }
  }
})

 

标签:next,守卫,token,vue3,router,全局,导航,路由
来源: https://www.cnblogs.com/jackfh/p/15907185.html