丝滑页面切换动效之路由篇-vue3的H5项目从0到1工程化落地经验篇11

这是vue3的H5项目从0到1工程化落地经验的第11篇，有了这个系列你可以从0创建一个自己的h5项目，并且里边涉及到的常用的点都会包含到。本来想写成一篇，但是太长了，搞得编辑器都卡了。所以我拆分成了一系列的文章，在文章尾部能看到其他链接。如有不当之处，欢迎大神不吝赐教。

大家一定看过不同网站后有这样的感觉，感觉很丝滑，很流畅，一点不卡顿，有的网站就觉得一点都不丝滑，直愣愣的就出现了，这些都是细节。当然并不是一个细节决定的，今天我分享的是如何让页面切换时效果很丝滑。

要用vue什么能力？

页面要切换，所以涉及到路由，使用vue router提供的<router-view>。
既然丝滑，所以肯定不是突然改变，所以就涉及到过渡，vue的过渡组件是<transition>和<transition-group>。

vue2和目前最新的vue3的有区别，Vue Router 4+版本和之前版本的<router-view>也有区别。所以这里一定得注意使用的版本。尤其是AI回答的时候它不会主动考虑你在用的版本，于是生成的答案跟你的项目不符。

其实官网有两者结合使用的示例，Vue Router v4版本官网：示例如下

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

Vue Router v3版本官网：Vue 2对应的Vue Router版本是v3，而Vue 3对应的是v4。更以前的版本我就不说了，已经被官方归档了，也不好查询，我觉得也没人用之前的版本了。V3示例如下:

Vue Router v4版配置含义

下边一点一点讲每一个配置的含义，如果不想看，可以直接拉到最后，最后放了个最终版，也是咱们在项目中真正使用的版本。

<router-view v-slot="{ Component }">
  <component :is="Component" />
</router-view>
<!-- 等价于<router-view /> -->

RouterView 组件暴露了一个插槽，可以用来渲染路由组件。上面的代码等价于不带插槽的 <router-view />，但是插槽能扩展。

比如扩展一个Transition 组件：

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

这样会对所有页面使用同一个过渡动效，如果想要A页面使用一个左滑动效，B页面使用一个右滑的动效怎么办呢？答案就是——配置路由元数据：

const routes = [
  {
    path: '/custom-transition',
    component: PanelLeft,
    // 这里写上想要给该页面使用的动画名字
    meta: { transition: 'slide-left' },
  },
  {
    path: '/other-transition',
    component: PanelRight,
    meta: { transition: 'slide-right' },
  },
]

那么这时候<router-view />也得改改写法：v-slot得多传一个参数route.这样就能获取到上边配置的元数据meta了。

<router-view v-slot="{ Component, route }">
  <!-- 使用任何自定义过渡和回退到 `fade` -->
  <transition :name="route.meta.transition || 'fade'">
    <component :is="Component" />
  </transition>
</router-view>

再进一步，当路由有子路由的时候，以上的方式在父页面->子页面时不会触发动效，那这肯定不行，不能漏页面呀！所以这时候就需要:key，给component加一个key,也就是<component :is="Component" :key="route.path" />

所以最终版就是：

<router-view v-slot="{ Component, route }">
  <!-- 使用任何自定义过渡和回退到 `fade` -->
  <transition :name="route.meta.transition || 'fade'">
    <component :is="Component" :key="route.path" />
  </transition>
</router-view>

这时候已经写好了，只要再写几个动画就好了。

动画怎么写，请看下一篇。

各位看官大老爷夫人小姐少爷们，觉得满意就给个点赞❤。不满意就请在评论里发表意见。交流才能带来进步，感谢各位不吝赐教。

vue3的H5项目从0到1工程化落地经验系列：

1. vite初始化vue3全家桶项目-vue3的H5项目从0到1工程化落地经验篇1
2. 起别名@-vue3的H5项目从0到1工程化落地经验篇2
3. 清除浏览器默认样式-vue3的H5项目从0到1工程化落地经验篇3
4. 同wifi时用手机访问运行的项目-vue3的H5项目从0到1工程化落地经验篇4
5. 得禁用vetur插件-vue3的H5项目从0到1工程化落地经验篇5
6. 修改网站标题与logo-vue3的H5项目从0到1工程化落地经验篇6
7. vite6环境变量–vue3的H5项目从0到1工程化落地经验篇7
8. 全局方法使用指南-vue3的H5项目从0到1工程化落地经验篇8
9. 网站备案号–vue3的H5项目从0到1工程化落地经验篇9
10. Vue Router 4.x–vue3的H5项目从0到1工程化落地经验篇10