这次给大家带来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属性,保证该视图只渲染一次,来回切换不重复渲染
711b4defb0d229d702f71d5e9c9c74a9dd6e4ababe59793a4ac75fb9e5c5550e
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是Vue.js使用过渡动画制作路由跳转动画的详细内容。更多信息请关注PHP中文网其他相关文章!