vue中,既然<router-view>可以显示同级路由,子路由有啥意义?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中,既然<router-view>可以显示同级路由,子路由有啥意义?相关的知识,希望对你有一定的参考价值。
比如一个后台管理系统,header和asidemenu是一直存在的,点击asidemenu的按钮,会保留header asidemenu的基础上切换显示,此时页面显示由<router-view>标记,他们之间也是嵌套路由的关系。可是同级路由为什么也可以这样显示? 如此一来,子路由有什么特别意义吗
参考技术A 一个场景,主路由是后台首页,登录,退出,自定义404,500页等,子路由就是每个栏目菜单以及其他操作项。追问子路由和同级的主路由有什么区别吗?我的意思是,在显示方面,子路由是否收到主路由的限制? 有这个疑惑是因为,做后台管理系统项目时,匹配到子路由,便将子路由的页面显示到父路由的位置上。
VueJS-3 如何从 vue-router 渲染 <router-view></router-view>?
【中文标题】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
附:根据链接的问题,据称<transition>
在您使用此技术时会出现一些问题,因此请谨慎使用。
【讨论】:
以上是关于vue中,既然<router-view>可以显示同级路由,子路由有啥意义?的主要内容,如果未能解决你的问题,请参考以下文章
未知元素:<router-view> - 您是不是正确注册了组件?在 Vue-Router 中
@vue/test-utils 未知的自定义元素:<router-view>
Vue.js - 未知的自定义元素:<router-view>