Vue3 路由精讲:掌握 children 属性打造多层次嵌套导航

2023-12-21 08:17:22

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

使用嵌套路由可以帮助你组织和管理复杂的界面布局,特别是当你的应用程序具有多层次的导航结构时。

请不要忘记帮忙点赞和收藏,这是对我的最大支持和鼓励,如果你有任何问题或者建议,也欢迎在评论区留言。

文章来源:https://blog.csdn.net/andy_68147772/article/details/135076272
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。