Question

我无法实现特定的页面转换。

在我的应用中，存在中立状态（未激活任何路由）。我有两条路线通向（相同的）Page组件，根据路线道具显示内容。

我希望从中立状态过渡到页面（反之亦然）以更改不透明度（显示/消失）。在页面之间应从左向右滑动。

我正在观察$ 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动态路由转换（基于从/到）

1 个答案: