我正在使用 VueJS 创建一个 SPA 并在我转到另一条路线（例如通过导航栏）时对内容进行转换。
此时当前内容向左滑动，新内容从右侧进入。
现在我想检测内容是应该从左还是从右滑入，具体取决于：导航栏中链接的位置是在当前路线之前还是之后。
例如，我有一个包含以下项目的导航栏：
Home、References、Contact
当我在References页面上并单击Contact 时，内容应该从右侧进入。但是当我点击Home 时，内容应该从左边进来。
你将如何实施？
非常感谢您提前！<3
<template>
<div>
<Header/> // header will not change
<transition name="slide">
<router-view></router-view> // here comes the new content
</transition>
<Footer/> // footer will not change
</div>
</template>
.slide-enter-active {
transition: all .3s ease-out .35s;
}
.slide-leave-active {
transition: all .2s ease-in;
}
.slide-enter {
transform: translateX(100%);
}
.slide-leave-to {
transform: translateX(-100%);
}
您可以在路由中添加带有“顺序”概念的元字段。
const router = new VueRouter({
routes: [
{
path: ...,
component: ...,
children: [
{
path: 'link1',
component: linkOne,
// a meta field
meta: { order: 1 }
},
{
path: 'link2',
component: linkTwo,
// a meta field
meta: { order: 2 }
},
{
path: 'link3',
component: linkThree,
// a meta field
meta: { order: 3 }
}
]
}
]
})
您必须为转换名称使用变量/方法：
<transition :name="transitionName"></transition>
然后，根据当前路由和目标路由的顺序，您可以确定应用哪个转换并将其存储在 transitionName 变量中。（您可以使用 访问元数据this.$route.meta）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句