Question

我在这里有一个特定的用例。我有一个包含大量页面的大型Vue应用程序。每个页面都有一个page-id，用于在服务器上标识它并加载它的内容。这些ID位于路由器路径（parent-id/child-id/another-child-page-id）中。在页面组件本身上，我显示页面标题。不幸的是，页面标题的翻译键与页面标识之间没有相关性。

现在，我没有在页面ID和页面标题翻译之间创建我必须手动维护的映射，我想我可以在路由器配置中查找路由并需要组件：

{
  path: 'the-page',
  name: 'ThePage',
  component: resolve => require.ensure([], () => resolve(require('@/pages/ParentPage/ChildPage/ThePage')), 'parent-page')
}

这可以通过递归遍历路径来查找page-id，然后在promise中加载组件：

// find the route definition
const route = findRouteByPath(file.areaName)
// load the route component
new Promise(resolve => { route.component(resolve) })
.then(component => {
  console.log(component)
})

这给了我这样的组件：

Object {
  mixins: Array(1),
  staticRenderFns: Array(0), __file: "/the/file/path.vue",
  beforeCreate: Array(1),
  beforeDestroy: Array(1),
  components: Object,
  mixins: Array(1),
  render: function (),
  // etc.
}

如果我调用render函数，我会收到错误：

未捕获（承诺）TypeError：无法读取未定义
的属性'_c'

我想要做的是以编程方式呈现组件并从组件中获取插槽page-title的内容。

任何人都可以帮忙吗？

更新1

Vue.extend()然后安装似乎做我想要的。问题是，我得到各种错误，因为页面依赖于某些事物，如当前路线。我也有点担心触发某些created()挂钩会触发API调用等等。我目前的状态是试图摆脱mixins和hooks如此：

const strippedComponent = Object.assign(component, {
  mixins: [],
  components: {},
  beforeCreate: []
})
const Constructor = Vue.extend(strippedComponent)
const vm = new Constructor({})

但我还没到那儿。

更新2 我最后放弃了这个并且通过向每个路径添加meta: {}对象来点击子弹，在那里我存储诸如页面标题翻译键和其他好东西之类的东西。

VueJS - 以编程方式要求和呈现组件

0 个答案: