vue实现组件切换时动画过渡效果、样式穿透、路由守卫、

vue转场动画

<template>
  <transition name="fade" class="fade">
    <div class="login"></div>  // 一般页面使用过渡时结构如图所示
  </transition>
</template>

<router-view v-slot="{ Component }">
    <transition name="fade" class="fade">  //子组件使用过渡结构
      <component :is="Component" />
    </transition>
  </router-view>

 <transition name="fade" class="fade"> //也可以直接绑定到router-view上
      <router-view />
    </transition>

这三种都可以使用如下方法

1. 找到需要添加过渡动画的元素，用一个transition标签包裹起来，并给它指定一个name属性，这个name属性将来会替换掉类名的v-前缀
2. 定义上面6个类名里面的类容，注意类名v-前缀要换成name的值，关键要分清楚开始和结束的状态样式

搭配css设置

 .fade-enter-active{
    animation: ami 2s;
  }
  @keyframes ami {
    0%{
      transform: translateX(100%);
    }
    100%{
      transform: translateX(0);
    }
  }

  .fade-leave-active{
    animation: amiro 3s;
    transform-origin: center center;
  }

  @keyframes amiro {
    0%{
      transform: translateX(0) rotateZ(0);
    }
    100%{
      transform: translateX(-100%) rotateZ(-180deg);
    }
  }

修改想要的只需在样式中进行修改即可

keep-active

vue3不能直接使用keep-alive transition 进行包裹路由的坑（router-view）
keep-alive 使用方法如下

 <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>

样式穿透

:deep(.类名) {
  color: red;
}

路由守卫

路由拦截（路由守卫、导航守卫） 分为 3种：
全局的:

• 前置守卫：router.beforeEach((to,from,next)=>{})
• to-到哪里去 from – 从哪里来 next – 重定向
• 后置守卫：router.afterEach((to,from)=>{}) 没有next
  例如

router.beforeEach((to, from, next) => {
    // console.log(to, from, next);
    // console.log(store.state);
    // console.log(from.name)
  const token = store.state.token;
  if (!token && to.name!='Login') {
    // about -- > login
    // login -- > login
    next("login");
  }

  if(token && to.name=='Login'){
    next('/')
  }
  next()
});

router.afterEach((to,from,next)=>{
    console.log('afterEach',to, from, next);
})

组件的、
* beforeRouteEnter – 路由进入之前
* beforeRouteUpdate – 路由更新之前 (特定的指 组件没变；路由变了–动态路由)
* beforeRouteLeave — 路由离开之前
例如

  beforeRouteEnter(to,from,next){
            // console.log(to, from, next);
            next()
        },
        beforeRouteUpdate(to,from,next){
          console.log('beforeRouteUpdate')
            next()
        },
        beforeRouteLeave(to,from,next){
            console.log(to, from, next);
            next()
        }

独享的

• beforeEnter–是写在路由配置里面的
  例如

  {
    path: "/",
    name: "Home",
    component: Home,
      beforeEnter(to,from,next){
          console.log(to, from, next);
          console.log('独享的');
          next()
      }
  },