1.增加页面路由
{ path: '/feedbackList', name: 'feedbackList', component: () => import('../views/feedbackList/index'), meta:{ title: "反馈列表", index: 1 } }, { path: '/feedbackRecordList', name: 'feedbackRecordList', component: () => import('../views/feedbackList/record'), meta:{ title: "记录列表", index: 2 } }, { path: '/feedbackRecordDetails', name: 'feedbackRecordDetails', component: () => import('../views/feedbackList/details'), meta:{ title: "记录详情", index: 3 } }
2.修改
接着,我们打开 App.vue 页面
将<router-view />
修改为
<transition :name="transitionName">
<router-view />
</transition>
3.App.vue最终代码
<template> <div id="app"> <transition :name="transitionName"> <router-view /> </transition> </div> </template> <script> export default { name: 'App', data() { return { transitionName: "", }; }, methods: { }, components: { }, watch:{ $route(to,from){ //实现路由跳转动画 if (to.meta.index > from.meta.index) this.transitionName = "slide-left"; if (to.meta.index < from.meta.index) this.transitionName = "slide-right"; } } } </script> <style> #app { height: 100%; min-height: 100%; } /* 路由页面跳转交互 */ .slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active { will-change: transform; transition: all .5s; position: absolute; } .slide-right-enter { opacity: 0; transform: translate(-100%); } .slide-right-leave-active { opacity: 0; transform: translateX(100%); } .slide-left-enter { opacity: 0; transform: translateX(100%); } .slide-left-leave-active { opacity: 0; transform: translateX(-100%); } </style>
标签:index,vue,100%,slide,meta,right,active,滑动,路由 From: https://www.cnblogs.com/xmyfsj/p/18204934