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

Question

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

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

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

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

Answer 1

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

在您的 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>

Answer 2

据我所知——路由器转换是不可能的，因为一旦你运行“vuepress build”，整个站点就会是静态的。因此不再进行路由，因此页面将重新加载新内容而不是动态添加它。