首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue2嵌套路由

Vue2之嵌套路由详解

2025-08-26 09:33:57 作者：xrkhy

本文介绍Vue嵌套路由的实现方式,通过动态URL路径嵌套组件展示,涉及修改路由配置及创建子组件Son1/Son2,结合ElementUI菜单组件应用

数据准备

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 配置重定向
    { path: '/', redirect: '/find' },
    { path: '/find', component: ()=> import('@/views/Find.vue')},
    { path: '/my', component: () => import('@/views/My.vue')},
    { path: '/friend', component:  () => import('@/views/Friend.vue')}
  ]
})

export default router

src/app.vue

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find?id=1">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}

//  路由激活样式
.footer_wrap .router-link-active{
  background-color: purple;
}
</style>

src/views/Find.vue

<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
  </div>
</template>

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

<style>

</style>

src/views/Friend.vue

<template>
  <div>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
  </div>
</template>

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

<style>

</style>

src/views/my.vue

<template>
  <div>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
  </div>
</template>

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

<style>

</style>

项目目录

运行结果

什么是嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。

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

语法

语法1(推荐)

// ...
const router = new VueRouter({
  // ...
  routes: [
    // 配置重定向
    { path: '/', redirect: '/find' },
    { path: '/find', component: ()=> import('@/views/Find.vue'),
      // 配置子路由的重定向
      redirect: '/find/son1',
      // 配置子路由，子路由前面没有/。这种写法没有冗余
      children:[
        { path: 'son1', component: () => import('@/views/find/Son1.vue')},
        { path: 'son2', component: () => import('@/views/find/Son2.vue')},
      ]
    },
    { path: '/my', component: () => import('@/views/My.vue')},
    { path: '/friend', component:  () => import('@/views/Friend.vue')}
  ]
})
// ...

语法2

// ...
const router = new VueRouter({
  // ...
  routes: [
    // 配置重定向
    { path: '/', redirect: '/find' },
    { path: '/find', component: ()=> import('@/views/Find.vue'),
      // 配置子路由
      children:[
        // 配置子路由的重定向  这种写法前面有冗余
        { path: '/find',redirect: '/find/son1'},
        { path: '/find/son1', component: () => import('@/views/find/Son1.vue')},
        { path: '/find/son2', component: () => import('@/views/find/Son2.vue')},
      ]
    },
    { path: '/my', component: () => import('@/views/My.vue')},
    { path: '/friend', component:  () => import('@/views/Friend.vue')}
  ]
})
// ...

代码演示

新建src/views/find/Son1.vue

<template>
  <div style="border: 1px solid red; padding: 20px">
    <h3>我是find的子路由son1</h3>
  </div>
  
</template>

<script>
export default {
}
</script>

<style>
</style>

新建src/views/find/Son2.vue

<template>
  <div  style="border: 1px solid red; padding: 20px">
    <h3>我是find的子路由son2</h3>
  </div>
  
</template>

<script>
export default {

}
</script>

<style>
</style>

修改src/router/index.js(第一种语法)

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 配置重定向
    { path: '/', redirect: '/find' },
    { path: '/find', component: ()=> import('@/views/Find.vue'),
      // 配置子路由的重定向
      redirect: '/find/son1',
      // 配置子路由
      children:[
        { path: 'son1', component: () => import('@/views/find/Son1.vue')},
        { path: 'son2', component: () => import('@/views/find/Son2.vue')},
      ]
    },
    { path: '/my', component: () => import('@/views/My.vue')},
    { path: '/friend', component:  () => import('@/views/Friend.vue')}
  ]
})

export default router

修改Find.vue

<template>
  <div>
  	<!-- 添加二级路由 -->
    <div class="childernNav">
      <router-link to="/find/son1">子组件1</router-link>
      <router-link to="/find/son2">子组件2</router-link>
    </div>

	<!-- 添加二级路由的视图 -->
    <router-view></router-view>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
};
</script>

<style lang="scss">
.childernNav {
  display: flex;
  margin: 20px 0 ;
  a {
    // 清除a标签的默认样式
    text-decoration: none;
    color: #000;
    display: block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #ccc;
  }
  .router-link-active {
    background-color: green;
  }
}
</style>

运行流程

运行结果

结合ElementUI实战

请参考我之前的博客ElementUI之菜单(Menu)使用

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。