vue.js - VueJS-3 如何从 vue-router 渲染 ？

Question

在 vuejs 2 中，我能够通过返回渲染 html 标签直接在路由器中渲染。我正在尝试使用 vue-router 4 在 vue3 中做同样的事情，但它似乎不起作用:

{
        path: 'posts',
        redirect: '/posts/all',
        name: 'posts',
        meta: {'breadcrumb': 'Posts'},
        component: {
            render() {
                return h('router-view');
            }
        },
        children: [ //Lots of sub routes here that I could load off the anonymous router-view]
}

知道如何让组件呈现该路由器 View 并允许我使用我的子路由吗？我宁愿不加载单个组件只是为了容纳“”。这在 vue-router 3 中运行良好，不知道 4 有什么问题。我也从“vue”导入 {h}。

Answer 1

来自 Vue 3 渲染函数 docs :

In 3.x, with VNodes being context-free, we can no longer use a string ID to implicitly lookup registered components. Instead, we need to use an imported resolveComponent method:

你仍然可以做 h('div')因为它不是组件，但是对于组件，您必须使用 resolveComponent :

import { h, resolveComponent } from Vue;  // import `resolveComponent` too

component: {
  render() {
    return h(resolveComponent('router-view'))
  }
},

或者，如果您想使用 runtime compiler ，您可以使用 template选项:

component: {
  template: `<router-view></router-view>`
}