【vue-router】路由的基本了解

vue-router

1. 路由【组件】的懒加载：使用函数返回一个import方法，在import方法里加载组件路径，import方法会返回一个promise对象。只有当

用户手动切换到当前的路由中，才会去加载这个组件。

2. `$router`和`$route`的区别？

答：router是new VueRouter的实例对象，表示当前项目中整个的路由实例，拥有全部的路由功能。而route仅仅表示当前路由的信息。

3. 路由传参

- query 在地址中使用get方式显示：`?key=value&key=value`

- params 多个地址加载同一个组件，使用`/:动态参数`接收不同的值，其原理就是动态路由

- 元信息

- router-view 通过组件传参，凡是被router-view加载出来的视图组件，都会被传入自定义属性

4. 路由守卫｜路由的拦截器｜路由的生命周期

- 全局的守卫

  * beforeEach 前置守卫【路由的鉴权】

  * afterEach 后置守卫【作用很小】

- 路由独享守卫【路由配置里】

  * beforeEnter 进入前确认【打酱油的】

- 组件内的路由守卫【组件用的】

  * beforeRouteEnter 组件加载前再次确认

  * beforeRouteUpdate 【最重要】当前页面不销毁，但是地址再变化，用于获取最新路由信息的函数

  * beforeRouteLeave 离开当前路由组件前

5. 动态路由和嵌套路由

  - 动态路由：`/path/:xx`一个路由匹配多个地址，加载的是同一个组件

  - 嵌套：一个父路由里有children子路由

6. 路由元信息

  - meta对象来传递数据

7. 动态添加路由

  - addRoute 只能添加一条路由匹配对象

  - addRoutes 可以添加一组路由匹配对象

8. 路由模式

  都是基于导航对象封装的，分别是history和hash对象

  - history 历史记录对象封装的，普通的url地址

  - hash 锚地方式，用`#`表示路径

  区别是：hash不回发起真正的url请求，而history会发起真正的请求。