【Vue Router】014-过渡动效*

傷城~ 2023-10-01 11:35 17阅读 0赞

## 1.14 过渡动效\* ##

### 1.14.1 概述 ###

> 想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [v-slot API][]：

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

> [Transition 的所有功能][Transition] 在这里同样适用。

### 1.14.2 单个路由的过渡 ###

> 上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，你可以将[元信息][Link 1]和动态的 `name` 结合在一起，放在`<transition>` 上：

#### 路由配置 ####

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>

### 1.14.3 基于路由的动态过渡 ###

> 也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。使用和刚才非常相似的片段：

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

> 我们可以添加一个 [after navigation hook][]，根据路径的深度动态添加信息到 `meta` 字段。

router.afterEach((to, from) => {
        
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      to.meta.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    })

[v-slot API]: https://next.router.vuejs.org/zh/api/#router-view-s-v-slot
[Transition]: https://v3.vuejs.org/guide/transitions-enterleave.html
[Link 1]: https://next.router.vuejs.org/zh/guide/advanced/meta.html
[after navigation hook]: https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%90%8E%E7%BD%AE%E9%92%A9%E5%AD%90