Vue嵌套路由（vue-cli项目写法）

Vue嵌套路由（vue-cli项目写法）

• 创建项目后
• 书写路由规则

  const routes = [
  {
    path: '/',
    redirect: '/home', // 重定向到/home路径
  },
  {
    path: '/home',
    component: Home // home组件页面（第一层）
  },
  {
    path: '/about', // about组件页面（第一层）
    component: () => import('../views/About.vue'),
    children: [
      { 
      /* 
      注意：path的写法
      path: 'son1' -> 表示 /about/son1路径
      path: '/son1' -> 表示 /son1 路径
      path: '/about/son1' -> 表示/about/son1
      */
        path: 'son1',  // 第二层
        component: () => import('../views/AboutSon1.vue'),
        children: [
          {  // 第三层
          // 同理，这里也是一样的：表示/about/son1/sonson1
            path: 'sonson1',
            component: () => import('../views/AboutSonSon1.vue')
          },
          { // 第三层
          // 同理，这里也是一样的：表示/about/son1/sonson2
            path: 'sonson2',
            component: () => import('../views/AboutSonSon2.vue')
          }
        ]
      },
      { 
        path: 'son2', // 第二层
        component: () => import('../views/AboutSon2.vue'),
      }
    ]
  }
]

• 可以无限套下去，但是记得一点：二层上有children子路由，那么记得在第二层那个组件上添加router-view以及路由跳转事件或其他方式来进行跳转