十二、Vue 路由
文章目录
- 一、简介
- 二、安装与基本配置
-
- 安装 Vue Router
- 创建路由实例
- 在应用中使用路由实例
- 三、路由组件与视图
-
- 路由组件的定义与使用
- 四、动态路由
-
- 动态路由参数的定义与获取
- 动态路由的应用场景
- 五、嵌套路由
-
- 嵌套路由的概念与配置
- 嵌套路由的应用场景
- 六、路由导航
-
- <router - link> 标签的使用
- 编程式导航
- 导航守卫
- 七、路由的高级特性
-
- 路由懒加载
- 路由元信息（meta）
- 滚动行为
- 八、错误处理与重定向
-
- 路由错误处理（404 页面）
- 路由重定向
- 九、与 Vuex 的结合
-
- 在路由导航中使用 Vuex 存储状态
- 根据 Vuex 状态动态更新路由配置（高级用法）
- 十、测试路由
-
- 单元测试路由组件
- 测试路由导航
- 十一、跨模块路由管理与优化
-
- 模块化路由配置
- 性能优化策略回顾与整合
一、简介
在 Vue3 应用程序中，路由（Vue Router）用于实现单页面应用（SPA）的页面导航。它允许用户在不刷新整个页面的情况下，在不同的视图组件之间进行切换，提供了流畅的用户体验。通过管理 URL 和对应的组件，路由系统能够根据用户的操作（如点击链接），动态地加载和显示相应的组件内容。
二、安装与基本配置
安装 Vue Router
首先，需要通过 npm 或者 yarn 安装 Vue Router。如果使用 npm，可以在项目目录下的终端中运行npm install vue - router@4（这里以 Vue Router 4 为例，它适用于 Vue3）。
创建路由实例
在项目的src目录下，创建一个router.js（文件名可以自定义）文件。在这个文件中，引入createRouter和createWebHisto