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

vue-router相关理解

news 2025/11/10 7:47:18

一、前言

在单页应用（SPA）中，页面之间的跳转不再依赖传统的“整页刷新”，而是通过 前端路由 实现视图的局部更新。

vue-router 是 Vue 官方提供的路由管理器，它与 Vue 深度集成，让构建 SPA 变得简单高效。

本文将带你： ✅ 理解前端路由的核心思想
✅ 掌握 vue-router 的基本使用与高级特性
✅ 深入了解路由模式、导航守卫、懒加载等关键技术
✅ 避开常见坑点，写出更健壮的路由逻辑

无论你是刚接触 Vue 的新手，还是想系统梳理路由知识的开发者，这篇文章都能帮你彻底搞懂 vue-router。

二、什么是前端路由？

1. 传统多页应用（MPA）

每个 URL 对应一个 HTML 页面
跳转 = 请求新页面 → 浏览器刷新
缺点：白屏时间长、用户体验差

2. 单页应用（SPA） + 前端路由

整个应用只有一个 HTML 页面
路由变化时，不刷新页面，只更新局部视图
通过 JavaScript 动态渲染不同组件

📌 前端路由的本质：监听 URL 变化，映射到对应的组件并渲染。

三、vue-router 核心概念

概念	说明
Router	路由实例，管理所有路由规则
Route	单条路由记录，如 `{ path: '/home', component: Home }`
Routes	路由数组，定义所有路径与组件的映射关系
Router-view	路由出口，匹配的组件将在此渲染
Router-link	声明式导航，用于跳转的 `<a>` 标签替代品

四、基础使用：快速上手

1. 安装与引入

npm install vue-router@next

2. 定义路由

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
]const router = createRouter({history: createWebHistory(), // 路由模式routes
})export default router

3. 挂载到 Vue 应用

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')

4. 使用 `<router-view>` 和 `<router-link>`

<!-- App.vue -->
<template><div id="app"><!-- 导航链接 --><nav><router-link to="/">首页</router-link><router-link to="/about">关于</router-link></nav><!-- 路由出口 --><router-view></router-view></div>
</template>

✅ 至此，一个最基本的路由系统已搭建完成！

五、路由核心功能详解

1. 动态路由匹配

当需要根据 URL 参数渲染不同内容时（如用户 ID），使用动态路由。

{path: '/user/:id',component: User
}

:id 是动态参数
在组件中通过 $route.params.id 获取

<!-- User.vue -->
<template><div>用户ID：{{ $route.params.id }}</div>
</template><script>
export default {watch: {'$route'(to) {// 路由变化时重新获取用户信息this.fetchUser(to.params.id)}},created() {this.fetchUser(this.$route.params.id)}
}
</script>

💡 支持多个参数：/user/:id/post/:postId

2. 嵌套路由（父子路由）

适用于有层级结构的页面，如后台管理系统。

{path: '/admin',component: AdminLayout,children: [{ path: '', component: Dashboard },        // /admin{ path: 'users', component: UserList },    // /admin/users{ path: 'posts', component: PostList }     // /admin/posts]
}

<!-- AdminLayout.vue -->
<template><div><h1>后台管理</h1><aside>菜单栏</aside><!-- 子路由组件渲染在这里 --><router-view></router-view></div>
</template>

3. 编程式导航

除了 <router-link>，还可以通过 JS 控制路由跳转。

// 1. this.$router (Vue 2) 或 inject('router') (Vue 3)
this.$router.push('/home')
this.$router.push({ path: '/user', query: { id: 123 } })
this.$router.replace('/login') // 替换当前记录，不可后退// 2. 带参数跳转
this.$router.push(`/user/${id}`)
this.$router.push({ name: 'User', params: { id: 123 } })// 3. 后退/前进
this.$router.go(-1)
this.$router.back()

4. 命名路由与命名视图

命名路由（推荐）

{ path: '/user/:id', component: User, name: 'UserProfile' }

// 使用 name 跳转，更稳定（避免路径变更导致出错）
this.$router.push({ name: 'UserProfile', params: { id: 1 } })

命名视图（较少用）

{path: '/layout',components: {default: MainContent,sidebar: Sidebar,header: Header}
}

<router-view></router-view>
<router-view name="sidebar"></router-view>
<router-view name="header"></router-view>

六、路由模式（History Mode）

vue-router 提供三种模式：

模式	API	特点	适用场景
hash 模式	`createWebHashHistory()`	URL 带 `#`，如 `/#/home`	简单项目，无需服务端配置
history 模式	`createWebHistory()`	正常 URL，如 `/home`	生产环境推荐，需服务端支持
abstract 模式	`createMemoryHistory()`	不依赖浏览器 URL，适用于 Node.js 环境	SSR、测试

✅ 生产环境推荐使用 history 模式，但需注意：
服务端必须配置 fallback，所有路由都返回 index.html
否则刷新页面会 404

七、导航守卫（Navigation Guards）

导航守卫用于在路由跳转前后执行逻辑，如权限校验、页面标题设置等。

1. 全局前置守卫：`beforeEach`

router.beforeEach((to, from, next) => {// to: 即将进入的路由// from: 当前离开的路由// next(): 必须调用，否则钩子不会继续// 权限校验示例if (to.meta.requiresAuth && !isLogin()) {next('/login') // 重定向到登录页} else {next() // 放行}// 设置页面标题document.title = to.meta.title || '默认标题'
})

2. 全局后置钩子：`afterEach`

router.afterEach((to, from) => {console.log('路由跳转完成', to.path)// 通常用于埋点统计
})

3. 路由独享守卫

{path: '/profile',component: Profile,beforeEnter: (to, from, next) => {if (isLogin()) {next()} else {next('/login')}}
}

4. 组件内守卫

// 在路由组件中定义
export default {beforeRouteEnter(to, from, next) {// 进入组件前调用// 注意：此时组件实例还未创建，不能访问 thisnext(vm => {// 通过 vm 访问组件实例})},beforeRouteUpdate(to, from, next) {// 路由参数变化时调用（如 /user/1 → /user/2）this.fetchData(to.params.id)next()},beforeRouteLeave(to, from, next) {// 离开组件前调用const answer = window.confirm('确定要离开吗？')if (answer) {next()} else {next(false)}}
}

八、路由懒加载（Lazy Loading）

为了优化首屏加载速度，可以将路由组件拆分为独立的代码块，按需加载。

// 将 component 改为函数，返回 Promise
const routes = [{path: '/home',component: () => import('../views/Home.vue')},{path: '/about',component: () => import('../views/About.vue')},{// 带 webpackChunkName 的懒加载（可命名 chunk）path: '/admin',component: () => import(/* webpackChunkName: "admin" */ '../views/Admin.vue')}
]

✅ 优点：

减少首包体积
提升首屏加载速度
用户只加载当前需要的代码

九、常见问题与最佳实践

❓ 如何处理 404 页面？

// 放在路由数组最后
{ path: '/:pathMatch(.*)*', component: NotFound }

⚠️ 注意：通配符路由必须是最后一个。

❓ 路由跳转后页面不滚动到顶部？

// 在 createRouter 时配置 scrollBehavior
const router = createRouter({history: createWebHistory(),routes,scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { top: 0 }}}
})

❓ 如何传递复杂参数？

简单数据：query（URL 可见）
复杂对象：通过 params + 路由守卫或状态管理（Vuex/Pinia）传递

十、总结

功能	关键 API	用途
基础路由	`routes`, `<router-view>`, `<router-link>`	页面映射与渲染
动态路由	`:param`, `$route.params`	根据参数渲染内容
嵌套路由	`children`	构建层级页面
编程式导航	`push`, `replace`, `go`	JS 控制跳转
路由模式	`history`, `hash`	控制 URL 形式
导航守卫	`beforeEach`, `beforeEnter`, `beforeRouteLeave`	权限、拦截、逻辑控制
懒加载	`import()`	优化性能