vue.js - VueJS-3 如何渲染 从Vue路由器?
问题描述
在 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}。
解决方案
来自 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>`
}
推荐阅读
- javascript - 行方向填充剩余空间反应原生
- c - 链表中的分段错误
- scheme - 数量不匹配;预期的参数数量与预期的给定数量不匹配:1 给定:2
- c# - 从 AvalonDock LayoutAnchorable 中移除停靠组合按钮
- vue.js - 从 Capacitor 配置文件中获取 appId
- mule - 为组件中的参数“资源”找到无效配置
- c++ - Visual Studio Code - 更改编译器会出错
- wordpress - 使用 url 重写规则防止管理目录重定向
- actions-on-google - @assistant/conversation 中 CollectionBrowse 中的循环语句有什么用?
- terraform - Terraform:模块输出