嵌套路由

回顾路由的基本使用

– 1 定义子组件
– 2 在router/index.js中配置每个子组件的路由 配置之前需要先导入
– 2.1 配置路由 export default new Router({routers:[{子组件1},{子组件2},{子组件3}]});
– 3 在main.js中引入路由组件即可
– 4 父组件中通过<router-link to=“/index” > Home </router-link> 方式请求具体的某一个路由映射地址
– 父组件中展示路由返回的页面消息 使用<router-view></router-view>标签

vue router 嵌套路由的配置与使用

– 实际开发中的应用页面通常是有多层嵌套的组件组合而成的 同样URL中各段动态路径也按照某种结构对应嵌套的各层组件

案例如下图所示 一个菜单下存在多个子菜单

实现步骤

步骤相对繁琐 可以直接拉到文章最后下载本文demo查看

步骤1 新建菜单组件

– 新建Index,Menu1,Menu2,SubMenu1,SubMenu2,SubMenu3 SubMenu4 子组件
– Index组件中 template添加div内容 如下图

– Menu1中添加内容如下

– Menu2中添加内容如下

– SubMenu1中添加内容如下

– SubMenu2中添加内容如下

– SubMenu3中添加如下内容

– SubMenu4中添加如下内容

– 路由的index.js中引入并配置

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../pages/Index'
import Menu1 from '../pages/Menu1'
import Menu2 from '../pages/Menu2'
import SubMenu1 from '../pages/SubMenu1'
import SubMenu2 from '../pages/SubMenu2'
import SubMenu3 from '../pages/SubMenu3'
import SubMenu4 from '../pages/SubMenu4'
Vue.use(Router)

// 导出路由配置
export default new Router({
  // 配置多个路由使用数组形式
  routes: [
    {
      path:'/index',
      component:Index
    },
    {
      path:'/menu1',
      component:Menu1,
      children:[// 配置子菜单
        {
          path:'/menu1/subMenu1',// 绝对路径
          component:SubMenu1
        },{
          path:'subMenu2', // 简化写法 相对路径 相当于/menu1/subMenu2
          component:SubMenu2
        },{
        // 子菜单默认打开
          path:'',
          redirect:'/menu1/subMenu1'
        }
      ]
    },
    {
      path:'/menu2',
      component:Menu2,
      // 配置子菜单3 和子菜单4的路由
      children:[ // 子菜单可以使用相对路径 即 只写子菜单路由即可 也可也使用绝对路径 即 /主菜单/子菜单
        {
          path:'subMenu3',
          component:SubMenu3
        },{
          path:'subMenu4',
          component:SubMenu4
        },{
          // 子菜单默认打开
          path:'',
          redirect:'subMenu3'
        }
      ]
    },
    {
      path:'/',
      redirect:'/index'
    }
  ]
})

– 配置完路由后需要在main.js中引入路由

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' // 导入路由

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,// 配置路由 es6语法 key==value 则省略value
  components: { App },
  template: '<App/>'
})

– 父组件中添加菜单的访问路由
– 注意是菜单的路由 不是子菜单的路由 ，子菜单的路由需要修改具体的菜单

<template>
  <div>
    <div class="menu">
      <ul>
        <li>
          <!--  配置菜单的路由 -->
          <router-link to="/index">Home</router-link>
        </li>
        <li>
          <router-link to="/menu1">菜单1</router-link>
        </li>
        <li>
          <router-link to="/menu2">菜单2</router-link>
        </li>
      </ul>
    </div>
    <div class="content">
      <!-- 显示路由跳转后的内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>

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

<style scoped>

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

ul li a{
  text-decoration: none;

}

.content{
  clear: both;
  padding: 30px;
}

/*
点击后改变颜色
router-link-active 是点击菜单后动态添加的样式 可以通过F12 定位到要点及的连接处就能看到了
*/
.router-link-active{
  color: red;
}
</style>

– 修改Menu1菜单中内容 添加子菜单的访问路由

<template>
<div class="main3">
    <!-- 子菜单 左右布局 -->
    <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>
.main3{
  display: flex;/* flex 默认就是左右布局 */
}


ul li{
  line-height: 30px;
  list-style-type: none;
}
ul li a{
  text-decoration: none;
}
.content{
  padding: 30px;
}
.router-link-active{
  color: red;
}
</style>

修改Menu2 添加子菜单访问路由

<template>
<div class="main">
  <!-- 配置子菜单访问路由 -->
  <div class="menu">
    <ul>
      <li>
        <router-link to="/menu2/subMenu3">子菜单3</router-link>
      </li>
      <li>
        <router-link to="/menu2/subMenu4">子菜单4</router-link>
      </li>
    </ul>
  </div>
  <div class="content">
    <router-view></router-view>
  </div>
</div>
</template>

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

<style scoped>
.main{
  display: flex;/* flex 默认就是左右布局 */
}


ul li{
  line-height: 30px;
  list-style-type: none;
}
ul li a{
  text-decoration: none;
}
.content{
  padding: 30px;
}
.router-link-active{
  color: blue;
}
</style>

测试

本文Demo下载 提取码 fj65