vue-router相关理解

一、前言

随着 Vue.js 在前端开发中的广泛应用，Vue Router 成为了 Vue 官方推荐的路由管理器。它不仅支持单页面应用（SPA）中常见的路由跳转、嵌套路由、懒加载等功能，还提供了导航守卫、动态路由等高级特性。

本文将带你深入了解：

Vue Router 的基本概念；
路由配置与使用方式；
嵌套路由与命名视图；
动态路由与懒加载；
导航守卫机制；
实际开发中的典型使用场景；

通过这篇文章，你将掌握 Vue Router 的核心功能与原理，能够熟练地在项目中进行路由管理。

二、什么是 Vue Router？

Vue Router 是 Vue.js 官方的路由管理库，用于构建单页应用（SPA），实现不同组件之间的切换和导航。

✅ 核心功能：

功能	描述
路由映射	将路径映射到组件
组件切换	不刷新页面切换组件
参数传递	支持动态路由参数（如 `/user/:id`）
嵌套路由	实现父子级组件结构
懒加载	异步加载组件，提升性能
导航守卫	控制路由跳转逻辑（权限验证、登录拦截等）

三、Vue Router 的安装与配置

✅ 安装（Vue 3）

npm install vue-router@4

✅ 创建路由实例（`router/index.js`）

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

✅ 在 `main.js` 中挂载路由

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

四、基础使用：路由跳转与组件渲染

✅ `<router-link>`：声明式导航

<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

✅ `<router-view>`：动态渲染组件的位置

<router-view />

📌 效果：

点击链接时，不会刷新页面；
页面内容根据当前路径自动切换为对应组件；

五、动态路由与参数传递

✅ 动态路由示例

{path: '/user/:id',name: 'User',component: () => import('../views/User.vue')
}

✅ 在组件中获取参数

export default {mounted() {console.log(this.$route.params.id)}
}

📌 示例 URL：

/user/123 → this.$route.params.id === '123'

六、嵌套路由（父子路由）

适用于多级菜单、布局嵌套等场景。

✅ 路由配置

{path: '/dashboard',name: 'Dashboard',component: DashboardLayout,children: [{path: 'profile',component: Profile},{path: 'settings',component: Settings}]
}

✅ 页面结构

<!-- DashboardLayout.vue -->
<template><div><h2>仪表盘布局</h2><router-view /> <!-- 子路由组件在这里显示 --></div>
</template>

📌 访问路径：

/dashboard/profile
/dashboard/settings

七、命名视图（多个 `<router-view>`）

适用于需要在同一页面展示多个组件区域，例如侧边栏 + 主体内容。

✅ 路由配置

{path: '/layout',components: {default: MainContent,sidebar: SideBar}
}

✅ 模板中使用多个 `<router-view>`

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

八、懒加载组件（按需加载）

懒加载是优化首屏加载速度的重要手段，Vue Router 支持异步加载组件。

✅ 使用 `import()` 实现懒加载

{path: '/contact',name: 'Contact',component: () => import('../views/Contact.vue')
}

📌 特点：

只有访问该路由时才会加载对应的组件；
减少初始加载时间，提升用户体验；

九、导航守卫（Navigation Guards）

导航守卫用于控制路由的跳转逻辑，常用于权限验证、登录拦截、页面缓存等场景。

✅ 全局前置守卫：`beforeEach`

router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated()) {next('/login') // 未登录跳转登录页} else {next()}
})

✅ 路由独享守卫：`beforeEnter`

{path: '/profile',name: 'Profile',component: Profile,beforeEnter: (to, from, next) => {if (checkPermission(to.params.id)) {next()} else {next('/')}}
}

✅ 组件内守卫

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

export default {beforeRouteLeave(to, from, next) {const answer = window.confirm('确定离开吗？数据可能未保存。')if (answer) {next()} else {next(false)}}
}

十、编程式导航（JS 控制跳转）

除了使用 <router-link> 进行跳转外，还可以通过 JS 方式实现导航。

// 字符串路径
this.$router.push('/home')// 命名路由 + 参数
this.$router.push({ name: 'User', params: { id: 123 } })// 替换当前历史记录（不产生新记录）
this.$router.replace('/login')

十一、常见问题与解决方案

问题	解决方案
路由跳转后页面不更新	使用 `key` 属性强制重新渲染组件
获取不到 `$route` 或 `$router`	确保组件已正确注册并处于 `<router-view>` 内
动态添加路由无效	使用 `router.addRoute()` 方法
多个 `<router-view>` 不生效	检查是否遗漏了 `name` 属性或拼写错误
导航守卫无法阻止跳转	检查是否调用了 `next()` 并正确返回结果

十二、总结对比表

功能	推荐方式
基础路由跳转	`<router-link>` + `<router-view>`
动态路由传参	`params` / `query`
嵌套组件结构	`children` 配置
多视图展示	命名 `<router-view>`
按需加载组件	`() => import(...)`
权限控制	全局/路由/组件守卫
编程式跳转	`router.push()` / `replace()`
推荐程度	✅✅ 强烈推荐掌握