未应用 Vue 动态路由转换（基于 from/to）

Question

我在执行某个页面转换时遇到问题。

在我的应用程序中有一个中性状态（没有激活路线）。我有两条通往（相同）页面组件的路线，根据路线道具显示内容。

我想要从中性状态到页面（反之亦然）的过渡来改变不透明度（出现/消失）。从一页到另一页，它应该从左向右滑动。

我正在观察 $route 以实现此目的，如文档中所述 (https://router.vuejs.org/guide/advanced/transitions.html#route-based-dynamic-transition)。

请看我的例子：https://codesandbox.io/s/n06mojkv7j

单击 'A' 或 'B' 会将您带到相应的页面。单击 'X' 可将您带回中立状态。

因此，在中性状态下单击 'A' 会将不透明度从 0 更改为 1。单击 'X' 会将不透明度从 1 更改为 0。到目前为止一切顺利。

当页面 A 处于活动状态时，单击 'B' 可水平滑动页面。也符合预期。

然而，当您从中性位置开始点击 A，然后点击 B（所有转换都按预期进行）时，点击 'X' 就是出错的地方。您会看到页面水平滑动，而不是从 1 到 0 的不透明度（这是来自或进入中性状态的预期用途）。

$route watcher 中的条件已满足，transitionName 实际上已更改为 'opacity'（您也可以在控制台输出中看到）。但是应用了错误的转换。

我希望你们能给我任何关于这个问题的见解:)谢谢！

Answer 1

为 route.path='/' 添加如下配置，然后将解决您遇到的问题。

或者您可以查看 one working demo at CodeSandBox

演示：

const routes = [
  {
    name: "/",
    path: "/",
    component: {template:'<div/>'}
  },
  {
    name: "A",
    path: "/a",
    component: Page,
    props: { text: "A" }
  },
  {
    name: "B",
    path: "/B",
    component: Page,
    props: { text: "B" }
  }
]

未应用 Vue 动态路由转换（基于 from/to）

Vue dynamic route transition (based on from/to) not being applied

javascript

transition

vue-router

vuejs2