Nested Routes

在 Vue.js 中，Nested Routes（嵌套路由）是一种组织和管理复杂应用程序路由结构的方式。以下是如何在 Vue 中使用 Vue Router 实现嵌套路由的基本步骤和概念：

1. 安装和配置 Vue Router

首先，你需要在 Vue 项目中安装 Vue Router，并在主入口文件（如main.js）中进行配置。这通常包括创建一个新的 Vue Router 实例，并定义基本的路由规则。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = new VueRouter({
  routes,
});

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

2. 定义嵌套路由

在 Vue Router 中，你可以通过在路由配置中嵌套路由对象来定义嵌套路由。每个嵌套的路由对象都会被关联到一个父级路由的组件中。

const routes = [
  {
    path: '/',
    component: ParentComponent, // 父级组件
    children: [
      {
        path: 'child',
        component: ChildComponent, // 子组件
      },
      {
        path: 'grandchild',
        component: GrandchildComponent, // 孙组件
      },
    ],
  },
];

在这个例子中，我们有一个父级路由/，它对应着ParentComponent。这个父级路由有两个子路由：/child和/grandchild，分别对应着ChildComponent和GrandchildComponent。

3. 使用 <router-view>

在父级组件的模板中，你需要使用<router-view>组件来渲染嵌套的子路由组件。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <router-view></router-view>
    <!-- 这里将渲染子路由组件 -->
  </div>
</template>

4. 动态路由参数和命名视图

嵌套路由还可以与动态路由参数和命名视图结合使用，以实现更复杂的布局和数据传递。

总的来说，Vue 中的 Nested Routes 提供了一种灵活的方式来组织和管理多层级的应用程序界面。通过这种方式，你可以根据 URL 的不同部分加载相应的组件，并保持应用状态和用户体验的一致性。