当前位置：首页 > news >正文

Vue Router 3 使用详解：从零构建嵌套路由页面

news 来源：原创 2025/5/10 8:41:02

Vue Router 是 Vue.js 官方的路由管理器，常用于构建单页面应用（SPA）。本文将手把手带你完成 vue-router@3.6.5 的基本配置，并实现一个带有嵌套路由的页面结构。本文适用于 Vue 2.x 项目

一、安装 vue-router@3.6.5

npm install vue-router@3.6.5

二、创建 Router 配置文件

在 src/router/ 目录下创建 index.js 文件：

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import User from '@/views/User.vue'
import Main from '@/views/Main.vue'Vue.use(Router)export default new Router({routes: [{path: '/',redirect: '/main'},{path: '/main',component: Main,children: [{path: 'home',component: Home},{path: 'user',component: User}]}]
})

说明：

根路径 / 会重定向到 /main；

/main 是一个主路由，它内部通过 children 配置两个子页面：/main/home 和 /main/user；

Home 和 User 是实际渲染的业务页面。

三、准备页面组件（views）

在 src/views/ 目录下，创建以下三个页面组件：

① Home.vue：

② User.vue：

③ Main.vue（嵌套路由的父组件）：

<template><div><h2>Main 页面</h2><router-link to="/main/home">首页</router-link> |<router-link to="/main/user">用户</router-link><!-- 嵌套路由的出口 --><router-view /></div>
</template>

四、在 main.js 中挂载路由

修改 main.js 文件，引入并挂载路由实例：

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')

五、在 App.vue 中添加 router-view 出口

App.vue 是所有页面的入口容器，在这里加入一级路由的出口：

<template><div id="app"><router-view /></div>
</template>

六、效果展示与说明

访问路径说明：

访问 http://localhost:8080/ 会自动重定向到 /main；

/main 页面展示 Main.vue 的内容，内部包含路由链接；

点击 “首页” 会加载 Home.vue；

点击 “用户” 会加载 User.vue；

Main.vue 是嵌套子路由的容器，通过 <router-view /> 显示子页面内容。

七、总结

在 Vue 2 项目中使用 vue-router，我们首先通过 npm 安装 vue-router@3.6.5。然后在 src/router 目录下新建一个 index.js 文件，定义路由配置：将页面组件（比如 Home.vue 和 User.vue）和路径进行映射。为了实现嵌套路由，我们还创建了一个主页面组件 Main.vue，里面写一个 <router-view /> 用作子路由的出口。

接着，我们在 main.js 中引入 router 实例，并挂载到 Vue 根实例中。App.vue 是整个项目的入口，我们在其中放置一级路由出口 <router-view />。这样，当页面加载时，会首先加载主路由 Main.vue，而 Main.vue 中的 router-view 再根据子路由显示不同的子页面，比如 Home 或 User。这样可以实现主组件不变，子内容切换的效果，适合后台管理系统或者页面框架结构中常见的主-子布局。

总结来说：我们通过安装路由、配置组件映射、创建并暴露路由实例、在 main.js 挂载、App.vue 设置一级出口、Main.vue 写嵌套路由出口，从而完成一个主组件保持不变、子组件动态切换的嵌套路由页面结构