javascript - VueJS Transition取决于链接是在导航栏中的当前链接之后还是之前

Question

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

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

现在我想检测内容是否应该从左侧或右侧滑入，具体取决于:导航栏中链接的位置是在当前路线之前还是之后。

例如，我有一个包含以下元素的导航栏:
主页、引用资料、联系方式

当我在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

您可以在路由中添加带有“顺序”概念的元字段。

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 访问元数据)