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

Posted

技术标签:

【中文标题】VueJS-3 如何从 vue-router 渲染 <router-view></router-view>?【英文标题】:VueJS-3 How to render <router-view></router-view> from vue-router? 【发布时间】:2021-05-26 06:39:18 【问题描述】:

在 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。

【问题讨论】:

【参考方案1】:

来自 Vue 3 渲染函数docs:

在 3.x 中,由于 VNode 是上下文无关的,我们不能再使用字符串 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>`

【讨论】:

从Vue Router 4开始,可以直接使用RouterView组件:path: 'my-path', component: RouterView, children: [...]。来源:github.com/vuejs/vue-router/issues/2105#issuecomment-761854147 @Papooch - 谢谢,这是很好的信息和更优雅的解决方案。也许您可以考虑将其作为单独的答案发布 我不想从链接的评论者那里窃取信用,但我想我过多地关注虚假的互联网积分,所以我不妨将其发布为答案:)【参考方案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

附:根据链接的问题,据称&lt;transition&gt; 在您使用此技术时会出现一些问题,因此请谨慎使用。

【讨论】:

以上是关于VueJS-3 如何从 vue-router 渲染 <router-view></router-view>?的主要内容,如果未能解决你的问题,请参考以下文章

使用Vue-Router时如何在组件之间传递数据

vue-router:无法解析异步组件渲染

vue+vue-router+axios+element-ui构建vue实战项目之七(渲染content.vue内容)

vue-router 不会在路由更改时渲染新组件

vue-router 中router-view不能渲染

vue-router 不会在嵌套路由上渲染模板