嵌套路由讲解

一、前言

路由嵌套，即在当前路由中注册子路由，形成父子路由，并在父路由中显示子路由对应的组件。子路由内也可以注册它的子路由，一直下去就可以形成一个庞大的“路由家族”。

简单来说，就是在一个路由的页面下，继续使用路由加载新的组件；可以将嵌套路由理解为父子路由，常见的多导航界面通常就是由多层嵌套的组件组合而成。

嵌套路由还有一个优点，就是让新的页面内容展示在父组件的占位符（即router-view标签）中，这样有利于页面结构的搭建，结构清晰。

那么，如何注册子路由呢？

Vue路由定义中需要用到一个children属性，其值为数组，数组中的每一项对应一个子路由。

二、码上谈兵

示例代码如下:

<template id="tmpl">
  <div>
    <h1>这是 Account 组件</h1>

    <router-link to="/account/login">登录</router-link>
    <router-link to="/account/register">注册</router-link>

    <router-view></router-view>
  </div>
</template>

路由配置文件如下：

routes: [
  {
    path: '/account',
    component: account,
    // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便去理解URL地址
    children: [
      { path: 'login', component: login },
      { path: 'register', component: register }
    ]
  }
  // { path: '/account/login', component: login },
  // { path: '/account/register', component: register }
]

还可以优化以上处理逻辑，在home路由对应的组件加载到页面时，若需要默认加载一个子路由时，可以做一个重定向，在home路由中redirect:"重定向的子路由网址"。这个时候加载home页面时默认会加一个子路由。

代码：默认显示home2

{
    path:"/home",
    name:"home",
    component:()=>import('../views/home/index.vue'),
    redirect:"/home/home2",//当网址为/home时重定向到/home/home2
    children:[
        {
            path:"home1",
            name:"home1",
            component:()=>import('../views/home/home1/index.vue')
        },
        {
            path:"home2",
            name:"home2",
            component:()=>import('../views/home/home2/index.vue')
        },
        {
            path:"home3",
            name:"home3",
            component:()=>import('../views/home/home3/index.vue')
        },
    ]
}

页面：当我们网址为localhost:8080/home时自动转跳到localhost:8080/home/home2，这时子路由home2对应的组件加载到home中。

三、拓展阅读

• 《Vue进阶（六十七）页面刷新路由传参丢失问题分析及解决》
• 《跨平台应用开发进阶(二十一) ：uni-app 路由传参参数丢失问题解决方案探究》
• 《Vue进阶（七十七）：vue 路由的两种模式：hash与history》
• 《Vue进阶（幺叁捌）：vue 路由传参的几种基本方式》
• 《Vue进阶（八十五）：vue-router Hash模式跳转及懒加载》