四、vue-router
（两种路由模式、编程式/组件式、如何传参(优缺点)、）
1.路由原理
路由就是用来解析URL实现不同页面之间的跳转
我们一步步实现这两种路由，来深入理解下底层的实现原理。我们主要实现以下几个简单的功能：
监听路由的变化，当路由发生变化时，
可以作出动作；
可以前进或者后退；
可以配置路由；
2.路由的两种模式
1.hash模式
- ：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；
特点：
- hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面
- hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如
http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
（ 说白了，就是监听 url 中 hash 的变化，然后渲染不同的内容，这种路由不向服务器发送请求，不需要服务端的支持；）
2.history模式
：history采用HTML5的新特性；且提供了两个新方法：pushState（），
replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
特点:
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 地址后加上/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。
说白了， (监听 url 中的路径变化，需要客户端和服务端共同的支持；)
3.路由传参：
编程式、组件式
编程式：
this.$router.push({path:'/newDetail/495'});js方法来跳转组件式：
<router-link to="/user/useradd"> 增加用户 </router-link>
通过 标签的to=“xx路径xx” 属性 来进行跳转
三种：
分别是query，params，动态路由传参
接收：
通过query方式传递过来的参数一般是通过this.$route.query接收
通过params方式传递过来的参数一般是通过this.$route.params接收
通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收
注意：
- query使用path和name传参跳转都可以，而params只能使用name传参跳转。
- 传参跳转页面时，query不需要再路由上配参数就能在新的页面获取到参数，
- params也可以不用配，但是params不在路由配参数的话， 当用户刷新当前页面的时候，
参数就会消失。 - 也就是说使用params不在路由配参数跳转，只有第一次进入页面参数有效，刷新页面参数就会消失。