VueJS 转换取决于导航栏中 link 是在当前 link 之后还是之前

Question

我正在使用 VueJS 创建一个 SPA，并在我转到另一条路线（例如通过导航栏）时对内容进行转换。

此时当前内容向左滑动，新内容从右侧进来。

现在我想检测内容应该从左滑入还是从右滑入，取决于： link 在导航栏中的位置是在当前路线之前还是之后。

例如，我有一个包含以下项目的导航栏：
主页、参考文献、联系人

当我在 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%);
}

Answer 1

您可以在路线中添加带有 'order' 概念的元字段。

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 }
        }
      ]
    }
  ]
})

您必须使用 variable/method 作为转换名称：

<transition :name="transitionName"></transition>

然后，根据当前路由和目标路由的顺序，您可以确定应用哪个转换并将其存储在 transitionName 变量中。（您可以使用 this.$route.meta 访问元数据）

VueJS 转换取决于导航栏中 link 是在当前 link 之后还是之前

VueJS Transition depending on whether a link is behind or before the current link in navbar

html

javascript

css

transition

vue.js