vue-router 基础

 

一、vue-router 概述

1、一句话说明什么是 vue-router ?

vue-router 就是一个拦截器，这类似于地铁站的安检，用来“拦截和守卫”的。

2、vue-router 的功能

• 管理嵌套的路由和视图表
• 实现模块化的、基于组件的路由配置
• 支持路由参数、查询、通配符
• 实现基于 Vue.js 过渡系统的视图过渡效果
• 支持细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 history模式或 hash 模式，在 IE9 中自动降级
• 支持自定义的滚动条行为

 

二、如何引入 vue-router ？

当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

 

三、vue-router 的基本用法

1、动态路由匹配

2、嵌套路由

3、编程式的导航

4、命名路由

5、命名视图

6、重定向和别名

7、路由组件传参

8、HTML5 History 模式

 

四、vue-router 的高级用法

1、导航守卫

请戳此链接：https://blog.csdn.net/mChales_Liu/article/details/107880385

2、路由元信息

3、过渡效果

4、数据获取

5、滚动行为

6、路由懒加载

 

五、vue-router 完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

 

六、vue-router 原理 

遇到面试vue-router原理：https://blog.csdn.net/weixin_44667072/article/details/101014290?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param

浅谈vue-router原理：https://www.jianshu.com/p/4295aec31302

 

 

 

 

参考文档：https://router.vuejs.org/zh/