VueJS-3 Как отрендерить <router-view> </router-view> из vue-router?

Question

В vuejs 2 я мог выполнять рендеринг непосредственно в маршрутизаторе, возвращая тег рендеринга html. Я пытаюсь сделать то же самое в vue3 с vue-router 4, но, похоже, это не работает:

      {
        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. Я также импортирую {h} из 'vue'.

Answer 1

Из документации по функции рендеринга Vue 3 :

В 3.x, когда VNodes не зависят от контекста, мы больше не можем использовать строковый идентификатор для неявного поиска зарегистрированных компонентов. Вместо этого нам нужно использовать импортированный метод:

Вы все еще можете делать h('div') потому что это не компонент, но для компонентов вы должны использовать <tcode id="4155048"></tcode>:

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

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

В качестве альтернативы, что проще, вы можете использовать template вариант:

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

Answer 2

Начиная с Vue Router 4, вы можете использовать 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 .

PS Согласно связанной проблеме, якобы есть некоторые проблемы с <transition>когда вы используете эту технику, будьте осторожны.