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

Question

我在实现某个页面转换时遇到了问题。

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

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

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

请看我的例子：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" }
  }
]