VueJS-3如何从vue-router渲染<router-view></router-view>？

Question

在vuejs2中，我可以通过返回一个渲染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]
}

你知道如何让组件渲染该路由器视图，并允许我使用子路由吗？我不想仅仅为了容纳"“而加载单个组件。这在vue-router 3中工作得很好，不知道4出了什么问题。我还从'vue‘导入了{h}。

Answer 1

从Vue 3呈现函数docs

在3.x中的

中，由于VNodes是上下文无关的，我们不能再使用字符串ID来隐式查找已注册的组件。相反，我们需要使用导入的resolveComponent方法：

您仍然可以使用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>`
}

Answer 2

从Vue Router4开始，您可以直接使用RouterView组件：

import { RouterView } from 'vue-router';

//...

{
    path: 'posts',
    redirect: '/posts/all',
    name: 'posts',
    meta: {'breadcrumb': 'Posts'},
    component: RouterView, // <- here
    children: [ /* ... */ ]
}

来源：https://github.com/vuejs/vue-router/issues/2105#issuecomment-761854147

附注:根据链接的问题，当您使用此技术时，<transition>据称存在一些问题，因此请谨慎使用。