解决Vue根组件设置transition失效的问题

刘彦祖lyz2023-08-13 14:44

解决Vue根组件设置transition失效的问题

1.代码

html 复制代码

<div id="app">
   <!-- :name="$route.meta.transitionName" -->
   <transition :name="'animation'" mode="out-in">
     <router-view  />
   </transition>
 </div>
 <!-- 动画部分代码省略 -->

这样直接设置会发现路由切换时并没有效果，但是你每次修改代码后保存刷新页面时却又能看到一次动画效果。

2.解决办法

在router-view标签设置 key属性，并且确保是唯一的，这里我设置 :key="$route.fullPath"

以下为修改后的代码：

html 复制代码

<div id="app">
   <!-- :name="$route.meta.transitionName" -->
   <transition :name="'animation'" mode="out-in">
     <router-view :key="$route.fullPath" />
   </transition>
 </div>

修改后，transition动画就正常了。

分析

在 <router-view> 上使用 :key=" $route.fullPath" 时，每当路由发生变化时，$ route.fullPath 的值会发生变化，因为它会随着新的路由而更新。
这就意味着，每当路由切换时，组件的 key 会变化，从而触发 Vue.js 重新渲染组件。
在重新渲染的过程中，过渡效果会应用于离开的旧组件和进入的新组件，从而实现平滑的过渡效果。