Vuepress动态路由并呈现为页面？答案

【问题标题】：Vuepress dynamic routes and render as page?Vuepress动态路由并呈现为页面？
【发布时间】：2020-01-26 19:48:25
【问题描述】：

我使用 vuepress 作为 SPA 方法中静态生成页面和动态页面的混合解决方案。动态数据源是大型数据库服务器，因此无法使用 vurepress 1.x 中引入的additionalPages 功能。这意味着动态路由是使用下面的 enhanceApp.js 添加的。动态页面使用扩展布局呈现以共享相同的页面结构（页眉、页脚）。

// Foo is a layout component extends from Layout.vue
import Foo from './layouts/Foo.vue' 

export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData // site metadata
}) => {
  router.addRoutes([
    { path: '/foo/:id', component: Foo },
  ]);
}

它可以工作，但是layouts/Foo.vue 是一个组件。它像普通的markdown页面一样缺少frontmatter、markdown语法。问题是如何加载降价页面并作为组件传递给路由？

【问题讨论】：

标签： vue.js routes vuepress

【解决方案1】：

我还是 Vuepress 的新手，但我在源代码中遇到了this comment，可能会对您有所帮助。

当 Vue SFC 为源文件时，直接将其作为布局组件

我还没有读完所有的源代码，所以我不太确定我是否理解正确。但是我猜当 Vuepress 找到一个 vue 组件时，它不会像 markdown 文件那样渲染它。它假定您在 .vue 文件中拥有自己的风格。所以我认为这可能就是您缺少正常降价页面的原因。

不过，如果你需要将动态数据源与静态页面混合，你可以尝试use Vue in markdown得到你想要达到的效果。

【讨论】：