Vue2之嵌套路由詳解

更新時間：2025年08月26日 09:44:13 作者：xrkhy

本文介紹Vue嵌套路由的實現(xiàn)方式,通過動態(tài)URL路徑嵌套組件展示,涉及修改路由配置及創(chuàng)建子組件Son1/Son2,結(jié)合ElementUI菜單組件應(yīng)用

數(shù)據(jù)準備

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">發(fā)現(xiàn)音樂</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>發(fā)現(xiàn)音樂</p>
    <p>發(fā)現(xiàn)音樂</p>
    <p>發(fā)現(xiàn)音樂</p>
    <p>發(fā)現(xiàn)音樂</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>

項目目錄

運行結(jié)果

什么是嵌套路由

通過路由實現(xiàn)組件的嵌套展示，叫做嵌套路由。

實際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態(tài)路徑也按某種結(jié)構(gòu)對應(yīng)嵌套的各層組件

語法

語法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>發(fā)現(xiàn)音樂</p>
    <p>發(fā)現(xiàn)音樂</p>
    <p>發(fā)現(xiàn)音樂</p>
    <p>發(fā)現(xiàn)音樂</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>

運行流程