vue Router嵌套路由

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

我们搞个实例看看：

菜单1下面再搞两个子菜单；

首先我们在pages下建两个子菜单   

SubMenu1.vue

<template>
    <div>
      子菜单1内容
    </div>
</template>

<script>
  export default {
    name: 'SubMenu1'
  }
</script>

<style scoped>

</style>

SubMenu2.vue

<template>
    <div>
      子菜单2内容
    </div>
</template>

<script>
  export default {
    name: 'SubMenu2'
  }
</script>

<style scoped>

</style>

router/index.js修改下，menu1里加个children：

children:[

{

  path:'/menu1/subMenu1',

  component:SubMenu1

},

{

  path:'subMenu2',  // 简化写法 类似 /menu1/subMenu2

  component:SubMenu2

},

{

  path:'',

  redirect: '/menu1/subMenu1'

}

  ]

修改下Menu1.vue:

<template>
    <div class="main">
      <div class="menu">
        <ul>
          <li>
            <router-link to="/menu1/submenu1">子菜单1</router-link>
          </li>
          <li>
            <router-link to="/menu1/submenu2">子菜单2</router-link>
          </li>
        </ul>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'Menu1'
  }
</script>

<style scoped>

  .main{
    display:flex;
  }

  ul li{
    padding-left: 20px;
    list-style-type: none;
  }

  ul li a{
    text-decoration: none;
  }

  .content{
    padding: 30px;
  }
</style>