vue2路由守卫和相关总结知识点

1. 全局前置路由守卫：初始化调用、路由切换之前调用

   /*
   三个参数：
   to：要去的路由
   from：从哪来的路由
   next：放行
   */
   router.beforeEach((to,from,next)=>{
       if(to.path != '/login'){
           let flag = localStorage.getItem('status') || false
           if(flag){
               next()
           }else{
               next('/login')
           }
       }else{
           next()
       }
   })

2. 全局后置路由守卫：初始化调用、路由切换之后调用，没有next参数

   router.afterEach((to,from)=>{
       document.title = to.meta.title
   })

3. 独享路由守卫：对单个路由进行守卫，配置在需要的路由里。                                                          注意：独享路由守卫只有前置路由守卫，没有后置路由守卫

   {
       path:'/play/detail',
       component:()=>import('@/pages/Detail'),
       meta:{
           title:'详情'
       },
       beforeEnter:(to,from,next) => {
           let flag = localStorage.getItem('status') || false
           if(flag){
               next()
           }else{
               next('/login')
           }
       }
   }

keep-alive

<keep-alive>
  <router-view></router-view>
</keep-alive>

属性：

include：字符串或正则表达式。只有名称匹配的组件会被缓存

exclude：字符串或正则表达式。任何名称匹配的组件都不会被缓存

max：数字。最多可以缓存多少组件实例

// 组件被激活时触发
activated(){
  console.log("A组件被激活")
},
// 组件失活时触发
deactivated(){
  console.log("A组件被失活")
}

路由动画

使用第三方库：animate

1. 下载安装：npm i animate.css
2. 引用：在main.js中，导入animate库。 import 'animate.css'
3. 使用   将使用动画效果的路由组件使用 transition包裹   

   <transition 
     enter-active-class="animate__animated animate__fadeInRight" 
     leave-active-class="animate__animated animate__bounceOutLeft">
     <router-view></router-view>
   </transition>

   enter-active-class：进入时的动画效果

   leave-active-class：离开时的动画效果

   animate__animated：使用时必须添加的类名，是个基类

   animate__fadeInRight、animate__bounceOutLeft：是动画的类名

   参考官网：Animate.css | A cross-browser library of CSS animations.