vue3中router配置中的children怎么用
在Vue 3中,当你使用Vue Router创建路由配置时,
children属性允许你为某个路由定义嵌套路由。这意味着你可以在父路由下设置子路由,从而构建出具有层级结构的URL路径。
这里是一个基本的例子,展示了如何在Vue Router中使用children属性:
import { createRouter, createWebHistory } from 'vue-router';
import ParentComponent from './components/ParentComponent.vue';
import ChildComponent from './components/ChildComponent.vue';
import AnotherChildComponent from './components/AnotherChildComponent.vue';
const routes = [
{
path: '/parent',
component: ParentComponent,
children: [
{
// 当 /parent/child 被匹配时,ChildComponent 会被渲染在 ParentComponent 的 <router-view> 中
path: 'child',
component: ChildComponent,
},
{
// 当 /parent/another-child 被匹配时,AnotherChildComponent 会被渲染在 ParentComponent 的 <router-view> 中
path: 'another-child',
component: AnotherChildComponent,
},
// 如果你想要一个默认的子路由,可以使用空字符串作为子路由的 path
{
path: '',
component: DefaultChildComponent,
}
],
},
// ...其他路由
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
在这个例子中,/parent 路径对应的组件 ParentComponent 有两个子路由:/parent/child 和 /parent/another-child。这些子路由分别对应 ChildComponent 和 AnotherChildComponent 组件。当用户访问这些路径时,对应的子组件将会被渲染在 ParentComponent 的
要使嵌套路由工作,ParentComponent 需要包含一个
<!-- ParentComponent.vue -->
<template>
<div>
<h1>Parent Component</h1>
<!-- 子路由的组件将会渲染在这里 -->
<router-view></router-view>
</div>
</template>
使用嵌套路由可以帮助你组织和管理复杂的界面布局,特别是当你的应用程序具有多层次的导航结构时。
请不要忘记帮忙点赞,这是对我的最大支持和鼓励,如果你有任何问题或者建议,也欢迎在评论区留言。
大家好,我是斜杠君。免费学习我的教程《AI应用开发系列教程之扣子实战教程》,也可以进群一起讨论扣子问题。