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