深入理解 Vue Router：构建可靠的前端路由系统

最新推荐文章于 2024-05-12 22:40:26 发布

讲台催眠师明哥

最新推荐文章于 2024-05-12 22:40:26 发布

阅读量603

点赞数

分类专栏：前端文章标签：前端 vue.js javascript

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/132413998

版权

22 篇文章 0 订阅

订阅专栏

01-什么是前端路由以及路由两种模式实现原理

前端路由是指在单页应用（SPA，Single Page Application）中，通过客户端的路由机制实现页面切换和导航的方式。它将不同的 URL 映射到相应的组件或页面，并通过页面切换而无需重新加载整个页面。
前端路由的特点包括：
1. 基于 URL：前端路由使用 URL 来标识不同的页面或视图状态。每个页面或视图状态都有一个对应的 URL，用户可以通过修改 URL 来导航到不同的页面或视图。
2. 单页应用：前端路由通常用于单页应用。在单页应用中，所有的页面内容都加载一次，之后的页面切换只是替换了相应的组件或视图内容，而不需要重新加载整个页面，提供了更流畅的用户体验。
3. 前端控制：前端路由是在客户端控制的。它通过 JavaScript 来监听 URL 的变化，并根据 URL 的不同来渲染相应的组件或视图内容，实现页面切换和导航。
4. 动态加载：前端路由可以动态加载所需的组件或视图。当用户访问一个新页面时，路由系统会根据配置动态地加载对应的组件代码，从而避免了一次性加载所有页面内容带来的性能消耗。
5. 无需刷新：前端路由通过动态地替换组件或视图内容来实现页面切换，从而避免了整个页面的刷新。这不仅提高了页面加载速度，还能保持用户在切换页面时的当前状态，提供更好的用户体验。

vue路由的搭建
```
npm install vue-router
```
- 配置路由信息，并且与Vue进行结合，让路由插件生效。在/src/router/index.js创建配置文件：
vue路由的应用
嵌套路由模式

路由的传递参数主要有以下三种方式：
- query方式（显示） -> $route.query
- params方式（显示） -> $route.params
- params方式（隐式） -> $route.params
两种显示传递数据的差异点主要为:
- query是携带辅助信息
- params是界面的差异化
- 注意：隐式发送过来的数据，只是临时性获取的，一旦刷新页面，隐藏的数据就会消失。

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航
- 进入到指定路由前做一个拦截，看一下我们是否具备权限，如果有权限就直接进入，如果没权限就跳转到其他页面。
路由守卫分类
- 全局环境的守卫beforEach
- 路由独享的守卫beforeEnter
- 组件内的守卫beforeRouteEnter
完整的导航解析流程
1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
5. 在路由配置里调用beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫(2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入

关注