Vue前置导航守卫

前置路由守卫常用于项目在未登录时的跳转判断，不管是vue2还是vue3都是一样的用法，没有多少改变，路由守卫有好几种，写法也有几种，以下是最简单且最常用的一种。

判断用户是否登录需要在 beforeEach 导航钩子中进行判断

路由前置守卫beforeEach：

router.beforeEach((to,from,next)=>{} 的参数：

to: 要跳转到哪 ( 要跳转到哪个路由去 )

from：来自哪 ( 从哪个路由跳转过来的 )

next：是否放行（跳转）， 使用时是一个方法next( )

使用场景：

在router.beforeEach((to,from,next)=>{}函数下判断，如果进入登录页，那么就next( )放行，因为登录页不需要登录，如果进入其他需要登录的页面就要判断，如果没有token，就说明没有登录，那么不管跳转到哪，都因没有登录而不能进入，就让强制进入登录页，执行next（'/login'）；否则就是已登录，正常跳转，执行next（）；

代码在router下的index.js中写：

const router = createRouter({
  history: createWebHashHistory(),
  routes
})


// 路由守卫
router.beforeEach((to,from,next)=>{
  if(to.path == '/login'){
    next()
  }else{
    // 判断是否有token
    let token = window.sessionStorage.getItem("token")
    if(token){
      next()
    }else{
     next('/login')
    }
  }
})