vue3之RouterView插槽和过渡动效

RotuerView 组件暴露了一个插槽，可以用来渲染路由组件：

//代码等价于不带插槽的 <router-view />
<router-view v-slot="{ Component }">
  <component :is="Component" />
</router-view>

RotuerView 结合KeepAlive & Transition

//1、保持路由组件活跃
<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

//2、路由组件之间切换时实现过渡效果
<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

//3、持路由组件活跃和实现过渡效果
<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

过渡动效

//1、路径组件上使用转场
//这会对所有的路由使用相同的过渡

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>

//2、在路由对象的meta属性上传参，结合插槽传参使用
const routes = [
  {
    path: '/custom-transition',
    component: PanelLeft,
    meta: { transition: 'slide-left' },
  },
  {
    path: '/other-transition',
    component: PanelRight,
    meta: { transition: 'slide-right' },
  },
]
<!-- 基于路由的动态过渡名称 -->
<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition || 'fade'">
    <component :is="Component" />
  </transition>
</router-view>

//3、结合router.afterEach导航守卫，修改route.meta.transition的值
router.afterEach((to, from) => {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
})

强制在复用的视图之间进行过渡–（添加一个 key 属性来强制过渡）

Vue 可能会自动复用看起来相似的组件，从而忽略了任何过渡，添加一个 key 属性解决。

<router-view v-slot="{ Component, route }">
  <transition name="fade">
    <component :is="Component" :key="route.path" />
  </transition>
</router-view>