嵌套路由

嵌套路由

单页面应用程序中，很多情况会由多层嵌套的组件组件 ==> 同样URL中各段动态路径也会按照上下级关系对应多层嵌套的组件。利用vue-router中的嵌套路由配置，可以表达这种关系。

使用

在父级路由的映射选项中使用children选项来配置子路由映射规则。

      routes: [
        //父级路由
        {
          path: '/users',
          component: Users,
          //嵌套路由，使用children选项来设置子路由映射关系
          children: [
            { path: '/users/user01', component: { template: `<div>page of user01</div>` } },
            { path: '/users/user02', component: { template: `<div>page of user02</div>` } }
          ]
        }
      ]

父级路由对应Users组件中，可以在模板中添加子路由的导航，来实现点击跳转到子路由，

    const Users = {
      template: `
      <div>
      <router-link to="/users/user01">user01</router-link><br />
      <router-link to="/users/user02">user02</router-link><br />
      <router-view></router-view>
      </div>
      `
    }