vue-router

一、路由原理

路由就是用来解析URL实现不同页面之间的跳转

二、路由的两种模式

1. hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash；
   特点：
   hash虽然在URL中，但不被包括在HTTP请求中；hash不会重加载页面。
   hash 模式下，仅 hash 符号之前的内容会被包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
2. history模式：history采用HTML5的新特性；且提供了新方法：pushState()，replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
   特点:
   history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 地址后加上/id。后端如果缺少对 /id 的路由处理，将返回 404 错误。

三、传参

路由传参三种： 分别是query，params，动态路由传参

1. 传参方式:

方式	传参	接收
query	this.$router.push({path:"/index",query:{id:123}})	this.$route.query.id
params	this.$router.push({name:“index”,params:{id:123}})	this.$route.params.id

2. 优缺点

1.query使用path和name传参跳转都可以，而params只能使用name传参跳转。

2.传参跳转页面时，query不需要再路由上配参数就能在新的页面获取到参数，params也可以不用配，但是params不在路由配参数的话，当用户刷新当前页面的时候，参数就会消失。

3.也就是说使用params不在路由配参数跳转，只有第一次进入页面参数有效，刷新页面参数就会消失。

四、编程式、组件式

编程式：this.$router.push({path:'/newDetail/495'});
组件式：<router-link to="/user/useradd"> 增加用户 </router-link>

五、路由守卫

使用方式三种：

全局的 单个路由的 组件级的

1. 全局：router.beforeEach router.afterEach

2. 单个路由：beforeEnter

3. 组件级：beforeRouteEnter beforeRouteUpdate beforeRouteLeave

三个参数：

to： 要进入的目标路由
from： 要离开的路由
next： 是否进行下一步