3.路由嵌套

1.路由嵌套

实际生活中的应用界面，通常由多层嵌套的组件组合而成。
一个页面当中有多个子页面 这种结构叫做嵌套路由。

比如需要在/about路由下嵌套三个子路由:

需要在children中指定相应的子路由

// /about路由
{
    path: '/about',
    redirect:'/base',
    name:'About',
    component:()=>import("../components/About.vue"),
    meta: {
      keepAlive: true,
      title:'about'
    },
    children: [
      {
        path: '/base',
        name:'base',
        component:()=>import("../components/base.vue")
      },
       {
        path: '/photo',
        name:'photo',
        component:()=>import("../components/photo.vue")
      },
        {
        path: '/more',
        name:'more',
        component:()=>import("../components/more.vue")
      }
    ]
  },

  //about.vue组件中配置
  <router-link to="/base">基本信息组件</router-link> |
    <router-link to="/photo">头像照片组件</router-link> |
    <router-link to="/more">跟下更多个人信息组件</router-link>
  <router-view></router-view>

为了使子路由更具有语义,我们可以在子路由上加上父级路由地址:

//  /about路由
{
    path: '/about',
    redirect:'/about/base',
    name:'About',
    component:()=>import("../components/About.vue"),
    meta: {
      keepAlive: true,
      title:'about'
    },
    children: [
      {
        path: '/about/base',
        name:'base',
        component:()=>import("../components/base.vue")
      },
       {
        path: '/about/photo',
        name:'photo',
        component:()=>import("../components/photo.vue")
      },
        {
        path: '/about/more',
        name:'more',
        component:()=>import("../components/more.vue")
      }
    ]
  },

  //about.vue组件
  <router-link to="/about/base">基本信息组件</router-link> |
    <router-link to="/about/photo">头像照片组件</router-link> |
    <router-link to="/about/more">跟下更多个人信息组件</router-link>
   <router-view></router-view>