时间戳

首页 > 解决方案 > 如何在 vuepress 中转换路由？

vuejs2 - 如何在 vuepress 中转换路由？

问题描述

阅读Vue Router文档，实现路由转换的方法是：

<transition>
  <router-view></router-view>
</transition>

但问题是 VuePress 正在处理幕后的所有路由，所以我无法弄清楚该转换组件的放置位置。

无论如何在 VuePress 中可以做到这一点？

标签： vuejs2vue-routervuepress

解决方案

您需要创建自己的主题或弹出默认主题。

在您的 Page.vue 组件中将组件包装<Content />在<transition>

<transition name="fade">
  <Content :custom="false"/>
</transition>

如果要更改<Content />部分以外的内容，请使用绑定

<transition name="header-fade" mode="out-in">
  <header v-bind:key="$page.key">
    <h1>{{ $page.title }}</h1>
  </header>
</transition>

推荐阅读