Vue-3 路由2

路由2

1. 路由守卫

   守卫函数中的参数：
   
   ​	`to`: 即将要进入的目标。
   
   ​	`from`: 当前导航正要离开的路由。
   
   ​	`next`：next 是一个函数，next() 执行下一个钩子；next( false ) 表示中断执行；
   
   ​					next( '/login' ) 里面的参数可以是路由传参的参数设置一样。  
   
   ​					next( '/login' ) next( { path :' /name ' } )  next( { path :' /name ', query : { id : 123 } } )
   

2. 全局守卫

   路由鉴权

   白名单鉴权

   这种方式是通过路由白名单来实现的；路由白名单就是一个数组，将不需要鉴权的path放进去，在beforeEach触发的时候，判断一下是不是在数组中，在数组中直接放行即可；不在数组中的，就是需要鉴权的
   

   // 在src 目录下  新建一个 permission.js  
   // 引入 路由表文件  router/index.js
   import  router  from '.../router'
   
   router.beforeEach((to,from,next)=>{
        
       
       const  routerArr=['/login','/regist','/home']
       
       if(routerArr.indexOf(to.fullPath) !== -1){
        
           // 直接放行
           next()
           return
   	}
       let token = localStorage.getItem("TOKEN")
       if(token){
        
           // 直接放行
           next()
   	}else{
        
           // 否则跳转至 登录界面
           next('/login')  // next 中支持 字符串参数，对象参数，参数+传值
   	}
        
   })
   
   // 使用   在 main.js 文件中引入
   import './permission.js'
   
   new Vue({
        
       router,
       render:h=>h(App)
   }).$mount("#app")
   

   // 在src 目录下  新建一个 permission.js  
   // 引入 路由表文件  router/index.js
   import  router  from '.../router'</