Vue.js 是一种流行的前端框架，它使用路由来管理应用程序的不同页面。在 Vue.js 中，你可以使用子路由来组织和管理应用程序的路由。下面是如何在 Vue.js 中建立子路由的步骤：

本文目录导读：

1. 安装和配置 Vue Router
2. 定义子路由
3. 使用 <router-view> 和 <router-link> 组件

安装和配置 Vue Router

确保你的项目已经安装了 Vue Router，你可以通过以下命令使用 npm 安装 Vue Router：

npm install vue-router

安装完成后，在你的 Vue 项目中引入并配置 Vue Router，在你的主文件（通常是 main.js）中添加以下代码：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

创建一个新的路由实例，并定义你的路由规则：

const router = new VueRouter({
  routes: [
    // 定义你的路由规则
  ]
});

定义子路由

在定义路由规则时，你可以使用嵌套路由来创建子路由，嵌套路由允许你将一个路由的路径与另一个路由关联起来，以便在导航时同时加载父路由和子路由的组件。

以下是一个示例，展示了如何定义一个带有子路由的路由规则：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile, // 子路由对应的组件
        },
        {
          path: 'posts',
          component: UserPosts, // 子路由对应的组件
        }
      ]
    }
  ]
});

在上面的示例中，我们定义了一个名为 User 的父组件，它具有两个子路由：UserProfile 和 UserPosts，子路由通过 children 属性与父路由关联起来，每个子路由都有一个 path 和对应的组件，当用户访问 /user/:id/profile 或 /user/:id/posts 时，对应的子组件将被渲染到父组件的 <router-view> 中。

使用 <router-view> 和 <router-link> 组件

在父组件中，你需要使用 <router-view> 组件来渲染子组件，当用户导航到不同的路径时，对应的子组件将被渲染到 <router-view> 中。

<template>
  <div>
    <h2>User ID: {{ $route.params.id }}</h2>
    <router-view></router-view> <!-- 子组件的渲染位置 -->
  </div>
</template>

你还可以使用 <router-link> 组件来创建导航链接，以便用户可以点击链接来切换不同的子路由。

<template>
  <div>
    <router-link to="/user/:id/profile">Profile</router-link> <!-- 导航链接 -->
    <router-link to="/user/:id/posts">Posts</router-link> <!-- 导航链接 -->
  </div>
</template>

通过以上步骤，你就可以在 Vue.js 中建立子路由了，子路由可以帮助你更好地组织和管理应用程序的页面结构，并提高代码的可维护性。