【Vue | 补洞 | 16】嵌套路由

路由也可以有后代！通过 children 配置其嵌套路由，子子孙孙无穷尽也。

1. 作用

  配置多层级的菜单项对应路由，可见下图理解

只有一级路由的情况下

有嵌套路由的情况下

2. 用法

1）声明

  ① 写法一：通过 path 声明

// src/router/index.js
...
export default new VueRouter({
  routes: [
    {
      path: '/Father',
      component: father,
      children: [
        {
          // 此处无需写 /son，因为底层会自动加上 /
          path: 'son',
          component: Son
        },
        { ... }
      ]
    }
  ]
})

  ② 写法二：通过 name 声明

// src/router/index.js
// 声明
routes = [
  {
    name: 'fatherName',
    path: '/father',
    children:[
      {
        name: 'sonName',
        path: 'son',
      }
    ]
  }
]

注意 通过 name 指定路由名称，可以让原本需要访问路径如 /father/son ，变成直接访问 name 属性（就如同称呼别人时，每次都叫别人的身份证号肯定比直接喊他的名字麻烦）

一级路由的 path 需要加 /，而子路由的 path 无需加 /

2）跳转

① 写法一：通过 path 跳转

// 匹配子路由时，需要指定具体路径（包括父路径）
<router-link :to="{
	path: '/father/son',
  ...
}">

② 写法二：通过 name 跳转

// 无需指定路径，直接指定 name 即可
<router-link :to="{
	name: 'Jokerls',
  ...
}">

3. 总结

• 在路由配置下，通过 children 配置嵌套路由
• 配置路由和跳转有两种写法，一种通过 path，一种通过 name

---

更多相关文章，推荐阅读来补充知识体系~
【Vue | 补洞 | 15】路由和路由器，傻傻分不清
【Vue | 补洞 | 17】路由传参 & 路由prop配置
【Vue | 补洞 | 18】编程式路由导航
【Vue | 补洞 | 19】路由守卫