编程指南-Vue.js 3前端开发-3-组件与路由-2：Vue.js 3 路由
3.2 Vue.js 3 路由
3.2.1 路由简介
路由的基本思想都是关于数据的定向和转发。前端路由是一种在单页应用（SPA）中管理页面导航的技术，是路径和对应的组件构成的一组映射关系。传统地址跳转是点击链接或在地址栏中输入 URL ，浏览器会向服务器发送请求，服务器会返回一个新的页面，这种方式会导致每次页面切换都需要重新加载整个页面。而在 SPA 中，所有的页面内容都在一个 HTML 文件中加载，页面的切换是通过前端路由来实现的，点击链接或在地址栏中输入 URL ，前端路由会拦截这个请求，并根据 URL 地址通过配置的规则加载不同的页面内容。在Vue.js 3应用启动时，会创建一个全局的路由实例（new VueRouter()），这个实例负责监听URL的变化，当URL发生变化时，路由实例会根据当前的URL去匹配之前定义的路由规则完成页面渲染。前端路由的实现方式主要有两种：Hash模式和History模式。
（1）Hash模式
Hash模式的前端路由通过在URL的hash部分（即#号后面的部分）来设置路由路径。当hash值改变时，浏览器不会向服务器发送请求，而是会触发“hashchange”事件，可以通过监听这个事件来捕获URL的变化，并更新页面的内容。
（2）History模式
History模式的前端路由则利用HTML5 History API来实现。这个API提供了“pushState”和“replaceState”两个方法，允许向浏览器的历史记录中添加或替换状态，同时不会触发页面的刷新。此外，当浏览器的历史记录发生变化时（如点击了前进或后退按钮），也会触发“popstate”事件。
3.2.2 Vue Router
Vue Router是 Vue.js 3的官方路由管理器，功能包括嵌套路由映射、动态路由选择、模块化、基于组件的路由配置、路由传参、路由查询、使用通配符、过渡效果、导航控制、自动激活 CSS 类的链接、HTML5 history 模式或 hash 模式、可定制的滚动行为、URL 的正确编码等。
（1）Vue Router 的特点
Vue Router与 Vue.js 3核心深度集成，可以更简单的构建单页应用，其特点如下。
① 声明式导航：通过 <RouterLink> 组件，创建 a 标签来定义导航链接。
② 编程式导航：Vue Router 提供编程式导航的 API（如 router.push(), router.replace(), router.go() 等），允许在 JavaScript 代码中控制路由的跳转。
③ 嵌套路由：Vue Router 支持嵌套路由，允许将路由映射到嵌套的组件结构中。
④ 路由守卫：路由守卫允许在路由切换前、切换后或切换失败时执行特定的逻辑。
⑤ 路由参数：Vue Router 支持在 URL 地址中添加参数，并在组件中获取。
⑥ 路由懒加载：Vue Router 支持路由懒加载，即按需加载路由对应的组件。
（2）Vue Router项目示例
通过创建Vue Router项目来了解和掌握Vue Router的使用，具体步骤如下。
① 创建一个 项目名称“MyVueRouter”的项目（详情见编程指南1：认识Vue.js 3）。
② 打开“MyVueRouter”项目，在目录下方空白处点击鼠标右键，点击“在集成终端中打开”，如图3-2-2-1所示。
③ 在集成终端中输入“npm install vue-router@latest”命令安装Vue Router，如图3-2-2-2所示。
④ 安装完成后如图3-2-2-3所示。
⑤ 创建路由配置文件，在“src”目录下创建“router”文件夹并在“router”文件夹下创建“index.js”文件，文件内容如下。
⑥ 修改“src\main.js”文件，引入并全局注册路由组件，文件内容如下。
⑦ 创建导航组件文件，在“src”文件夹下创建“views”文件夹，在“views”文件夹下创建“HomeView.vue”文件和“AboutView.vue”文件，文件内容如下。
⑧修改“src\App.vue”文件，在“src\App.vue”文件中导入“RouterLink”和“RouterView”，文件内容如下。
⑨ 在集成终端中执行“npm install”安装项目扩展，如图3-2-2-4所示。
⑩ 在集成终端中执行“npm run dev”启动项目，如图3-2-2-5所示。
⑪ 在浏览器访问Local“http://localhost:5173/”，如图3-2-2-6所示。
⑫ 点击【about】按钮切换路由，浏览器路径变为“http://localhost:5173/#/about”,展示“关于页”，如图3-2-2-7所示。
创作说明
名称：编程指南-Vue.js 3前端开发从学到用完美实践
版本：2024年
网站：http://www.51xueweb.cn
撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆
指导审核：阮晓龙