嵌套路由

嵌套路由

需求场景

1. 实际开发中的应用界面，通常由多层嵌套的组件组合而成
2. 嵌套结构要对应着嵌套路由(通过路由实现组件的嵌套展示，叫做嵌套路由)

① 点击/user路由链接显示user模板内容
② 模板内容中又有子级路由(/profile /posts)链接
③ 点击子级路由链接显示子级模板内容

添加嵌套路由配置

1. 使用children可以添加嵌套路由的配置

2. 需要为谁添加嵌套路由，就是这个父级路由中添加children配置

3. children里面的路由配置和根路由配置类似

4. 注意，以/开头的嵌套路径会被当作根路径，根据需要进行选择

      {
          name: 'about',         
          path: '/about/:id',
          component: about,
          props: true,
          redirect: { name: 'intro' },
          children: [
              {
                  name: 'intro',
                  path: 'intro',
                  component: () => import('../components/intro.vue')
              },
              {
                  name: 'employ',
                  path: 'employ',
                  component: () => import('../components/employ.vue')
              },
          ]
   
      },
   

设置嵌套路由映射组件的渲染位置

1. 同样的，路由所映射组件需要设置渲染的位置
2. 一个被渲染组件同样可以包含自己的嵌套<router-view>，以展示这个组件的嵌套结构
3. 可以当儿子也可以当爸爸
4. 所以：我们可以在父级路由所映射组件中添加router-view