vue-router（基础2-嵌套路由）

嵌套路由

什么是嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/coma/a

/coma/b

案例

1. 基础的我们就跳过了，还有对创建项目和组件配置路由不清楚的朋友可以查看前几篇文章，我都有详细步骤。
2. 我们创建组件comA,comAsua,comAsub.

<!-- 组件comA的代码 -->
<template>
  <section>
    <!--  -->
    <div>我是A组件</div>
    <router-view></router-view>  
  </section>
</template>

<script>
export default {
      
      
  name:"comA"
  
}
</script>

<style>

</style>

<template>
  <section>
    <!-- 组件comAsua -->
    <div>我是A-a组件</div>
  </section>
</template>

<script>
export default {
      
      
  name:"comAsua"
  
}
</script>

<style>

</style>

组件comAsub的代码与comAsub一样，只是需要修改名字。

3. 然后在路由文件中配置组件路由

  {
    
    
    path:"/coma/",
    name:"coma",
    component:import("../pages/comA.vue"),
    children:[
      {
    
    
        path:"comasua",
        name:"comasua",
        component:import("../pages/comAsua.vue")
      },
      {
    
    
        path:"comasub",
        name:"comasub",
        component:import("../pages/comAsub.vue")
      }
    ]
  },

4. 保存运行 ，因为这里没有设置直接路径，所以我们要在浏览器上手动输入路径，我们就可以看到如下效果：
   
   

5. 说到底，嵌套路由就是，在组件中嵌套组件，让页面代码更干净；也更便于后期维护。