3

在 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]
}

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

4

2 回答 2

5

来自 Vue 3 渲染函数文档

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

您仍然可以这样做h('div'),因为它不是组件,但对于您必须使用的组件resolveComponent

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

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

或者,如果您想使用运行时编译器,您可以使用以下template选项:

component: {
  template: `<router-view></router-view>`
}
于 2021-02-24T15:50:00.730 回答
0

从 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>在使用此技术时会出现一些问题,因此请谨慎使用。

于 2021-11-15T14:27:47.573 回答