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'
    }
  }
})