这次给大家带来vue.js使用过渡动画制作路由跳转动画，vue.js使用过渡动画制作路由跳转动画的注意事项有哪些，下面就是实战案例，一起来看一下。
keep-live :切换过的视图会被缓存起来,如果不加keep-live 每次都会去重新请求一次,这样比较消耗资源
<transition name="fade">
<keep-alive>
<router-view></router-view>
</keep-alive></transition>注意:
当我们切换导航的时候,当前的link标签的类会被赋值为class="router-link-active",这是一个很有用的操作.
给router-link添加active-class="active" 用于修改样式
立即学习“前端免费学习笔记（深入）”；
<ul>
<router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
{{ item.name }} </router-link></ul>css部分
选种和hover时,显示蓝色
.product-board li.active,
.product-board li:hover {
background: #4fc08d;
color: #fff;
}
......router-view的keep-alive属性,保证该视图只渲染一次,来回切换不重复渲染
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上就是Vue.js使用过渡动画制作路由跳转动画的详细内容，更多请关注php中文网其它相关文章！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
850
