本文转自测试人社区，原文链接：ceshiren.com/t/topic/234…

嵌套路由

概念

通过路由规则的层级嵌套，在页面中显示复杂的组件结构关系

特点

父级路由中存在子级路由

功能：

点击父级路由链接，显示模板内容
模板内容中又有子级路由的链接
点击子级路由链接显示子级模板的内容

嵌套路由用法

通过路由规则的children属性，设置子路由

定义父路由和子路由（index.js）：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../views/Layout.vue'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'

Vue.use(VueRouter)

// 定义路由
const routes = [
  {
    path: '/layout',
    name: 'layout',
    component: Layout,
    // 通过children属性定义子路由，是数组嵌套字典的形式
    children: [
      // 相对路径写法
      { path: "login", component: Login },
      { path: "register", component: Register },
      // 绝对路径写法
      // { path: "/layout/login", component: Login },
      // { path: "/layout/register", component: Register },
    ]
  },
]

const router = new VueRouter({
  routes
})

export default router

父路由对应页面：

<template>
  <!-- App.vue -->
  <v-app>
    <v-navigation-drawer app>
      <!-- -->
    </v-navigation-drawer>

    <v-app-bar app>
      <!-- -->
    </v-app-bar>

    <v-main>
      <!-- 给应用提供合适的间距，内容区域 -->
      <v-container fluid>
        <!--vue-router 将设置好的子路由组件显示在这里-->
        <router-view></router-view>
      </v-container>
    </v-main>

    <v-footer app>
      <!-- -->
    </v-footer>
  </v-app>
</template>

子路由对应页面：

<template>
  <div class="login">
    <h1>登录 页面</h1>
  </div>
</template>

【霍格沃兹测试开发】精品课合集/ 自动化测试/ 性能测试/ 精准测试/ 测试左移/ 测试右移/ 人工智能测试

【霍格沃兹测试开发】腾讯/ 百度/ 阿里/ 字节测试专家技术沙龙分享合集/ 精准化测试/ 流量回放/Diff

【霍格沃兹测试开发】Pytest 用例结构/ 编写规范 / 免费分享

【霍格沃兹测试开发】JMeter 实时性能监控平台/ 数据分析展示系统Grafana/Docker 安装

【霍格沃兹测试开发】接口自动化测试的场景有哪些？为什么要做接口自动化测试？如何一键生成测试报告？

【霍格沃兹测试开发】面试技巧指导/ 测试开发能力评级/1V1 模拟面试实战/ 冲刺年薪百万！

【霍格沃兹测试开发】腾讯软件测试能力评级标准/ 要评级表格的联系我

【霍格沃兹测试开发】Pytest 与Allure2 一键生成测试报告/ 测试用例断言/ 数据驱动/ 参数化

【霍格沃兹测试开发】App 功能测试实战快速入门/adb 常用命令/adb 压力测试

【霍格沃兹测试开发】阿里/ 百度/ 腾讯/ 滴滴/ 字节/ 一线大厂面试真题讲解，卷完拿高薪Offer ！

【霍格沃兹测试开发】App自动化测试零基础快速入门/Appium/自动化用例录制/参数配置

【霍格沃兹测试开发】如何用Postman 做接口测试，从入门到实战/ 接口抓包（最新最全教程）

【霍格沃兹测试开发】6 小时轻松上手功能测试/ 软件测试工作流程/ 测试用例设计/Bug 管理

软件测试学习笔记丨Vue路由-嵌套路由

嵌套路由

嵌套路由用法

推荐学习