java1234开源博客系统
博客信息

vue Router嵌套路由

0
发布时间:『 2019-07-29 17:25』  博客类别:Vue.js  阅读(336)

vue Router嵌套路由


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


我们搞个实例看看:

GIF.gif


菜单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'

}

  ]


QQ鎴浘20190729172107.jpg



修改下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>



关键字:   vue     Router     嵌套路由  
Powered by Java1234 V3.0 Copyright © 2012-2016 Java知识分享网 版权所有