vue嵌套路由，二级路由使用介绍

最新推荐文章于 2025-11-09 18:01:48 发布

原创最新推荐文章于 2025-11-09 18:01:48 发布 · 6.1k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#vue嵌套路由 #vue二级子路由 #vue二级路由跳转 #vue路由 #vue二级路由

Vue 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了Vue.js中嵌套路由的使用场景和配置方法，通过实例演示如何在组件中设置二级子路由，实现页面局部刷新，保持头部不变，适用于多选项卡应用。

vue-router 嵌套路由，二级子路由

项目中如果都是一级路由，路由管理会有些乱。嵌套路由是路由中包含路由的意思，组件中可以有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套，在vue组件中使用<router-view>就可以了。

1.嵌套路由的使用场景

当项目中有选项卡时，切换选项卡按钮，页面中间部分的内容会变，但是选项卡按钮不会变；页面中间部分内容的变化就可以通过二级子路由实现，中间部分显示的内容就是二级子路由的内容

2.举个例子

在组件中：

<router-view> 是用来渲染通过路由映射过来的组件，当路径更改时，<router-view> 中的内容也会发生更改

<template>
  <div class="me">
    <div class="me-header">个人中心</div>
    <h3>二级路由，嵌套路由</h3>

    <div class="tab">
        <router-link to="/me/a">
            <div class="children">我是a组件</div>
        </router-link>
        <router-link to="/me/b">
            <div class="children">我是b组件</div>
        </router-link>
        <router-link to="/me/c">
            <div class="children">我是c组件</div>
        </router-link>
    </div>

    <router-view/>
        
  </div>
</template>

在router的index中子路由配置：

  {
    path: '/me',
    name: 'me',
    component:  ()=> import('@/views/me.vue'),
    children: [
      {
        path: 'a',
        component: () => import('@/components/me/a.vue'),
      },
      {
        path: 'b',
        component: () => import('@/components/me/b.vue'),
      },
      {
        path: 'c',
        component: () => import('@/components/me/c.vue'),
      },
      
    ]  
  }

点击“我是a组件”按钮路由就渲染me下的a组件内容，点击“我是b组件”按钮路由就渲染me下的b组件内容，点击“我是c组件”按钮路由就渲染me下的c组件内容

效果如下：

点击我是a组件