脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue2嵌套路由

Vue2之嵌套路由详解

 更新时间：2025年08月26日 09:44:13   作者：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)使用

总结

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

您可能感兴趣的文章:

相关文章

  • vue使用video.js依赖接入视频流((hls(m3u8)、flv))的示例代码

    vue使用video.js依赖接入视频流((hls(m3u8)、flv))的示例代码

    这篇文章给大家介绍了vue如和使用video.js依赖接入视频流((hls(m3u8)、flv)),文章通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01
  • Vue3 diff算法的简单解刨

    Vue3 diff算法的简单解刨

    如今Vue3的势头正盛，在diff算法方面也做了相应的变化，利用到了最长递增子序列把性能又提升了一个档次。本文就来带大家简单解刨一下Vue3中的diff算法
    2023-02-02
  • Vue3 axios配置以及cookie的使用方法实例演示

    Vue3 axios配置以及cookie的使用方法实例演示

    这篇文章主要介绍了Vue3 axios配置以及cookie的使用方法,需要的朋友可以参考下
    2023-02-02
  • vue3 elementPlus部分组件样式修改的方法

    vue3 elementPlus部分组件样式修改的方法

    这篇文章主要介绍了vue3 elementPlus部分组件样式修改的方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-01-01
  • vue异步加载dom元素之后无法获得的解决

    vue异步加载dom元素之后无法获得的解决

    这篇文章主要介绍了vue异步加载dom元素之后无法获得的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • vuex-persist 使用场景分析

    vuex-persist 使用场景分析

    Vuex-Persist 是一个用于在 Vuex 中实现持久化状态的库,它可以用来解决应用程序在刷新浏览器或关闭页面后丢失 Vuex store 中状态的问题,本文给大家介绍vuex-persist 可以用来干什么,感兴趣的朋友一起看看吧
    2023-11-11
  • Vue.js的Mixins使用方式

    Vue.js的Mixins使用方式

    Vue.js的Mixins功能允许封装可复用的组件选项,实现代码复用和模块化,Mixins可以包含数据、方法、生命周期钩子等组件选项,使用时,Mixins中的选项会被混入组件中,优先级低于组件自身选项,优点包括代码复用、高灵活性和简单易用
    2024-09-09
  • Vuejs中的watch实例详解(监听者)

    Vuejs中的watch实例详解(监听者)

    本文通过实例代码给大家介绍了Vuejs中的watch，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2020-01-01
  • 一文教你学会在Vue3中自定义指令

    一文教你学会在Vue3中自定义指令

    这篇文章主要为大家详细介绍一下如何在Vue3中实现自定义指令，文中的示例代码讲解详细，具有一定的借鉴价值，需要的同学可以参考一下
    2022-07-07
  • Vue.js 中 axios 跨域访问错误问题及解决方法

    Vue.js 中 axios 跨域访问错误问题及解决方法

    这篇文章主要介绍了Vue.js 中 axios 跨域访问错误问题及解决方法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-11-11

最新评论