Vue.js Vuepress动态路由并呈现为页面？

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

---

它可以工作，但是

layouts/Foo.vue

是一个组件。它缺少frontmatter，标记语法，就像普通的标记页面一样。问题是如何加载降价页面并作为组件传递给routes

我对Vuepress还是新手，但我在源代码中遇到了一些可能对您有所帮助的东西

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

我还没有读完所有的源代码，所以我不太确定我是否正确理解了它。但我猜当Vuepress找到vue组件时，它不会像标记文件一样呈现它。它假定您在

.vue

文件中有自己的样式。所以我认为这可能就是为什么你错过了正常的降价页面

但是，如果您需要将动态数据源与静态页面混合使用，您可以尝试获得您想要实现的目标

// 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 },
  ]);
}