【vue的路由模式】+路由实现原理+route和router

路由、路由模式

vue路由的两种模式：

1、hash模式，其原理是onhashchange事件，可以在window对象上监听这个事件；

2、history模式，可利用“history.pushState”的API来完成URL跳转。

前后端分离 ===> 利用Ajax，可以在不刷新浏览器的情况下异步数据请求交互。

单页应用（只有一个html文件，整个网站的所有内容都在这一个html里，通过js来处理）不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的。为了实现单页应用 ==> 前后端分离 + 前端路由。（更新视图但不重新请求页面）

前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，加载不同的组件，然后动态的渲染出区域 html 内容。

hash模式

1、vue-router默认是hash模式
2、url中有“#”号
3、hash值（“#”后的值）不会被包含在http请求中，改变hash值不会引起页面的重新加载。
4、hash改变会触发hashChange事件，会被浏览器记录下来，可以使用浏览器的前进和后退。
5、hash兼容到IE8以上
6、 会创建hashHistory对象，在访问不同的路由的时候,会发⽣两件事：

• HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶
• HasHistory.replace()替换到当前栈

history模式

1、url不带参数
2、history 兼容 IE10 以上
3、history 模式需要后端配合将所有访问都指向 index.html，否则用户刷新页面，会导致 404 错误
4、在HTML4中常用的方法：

history.forward()：在历史记录中前进一步
history.back()：在历史记录中后退一步
history.go(n)：在历史记录中跳转n步骤，n=1为前进一页，n=0为刷新本页,n=-1为后退一页。
5、HTML5中新增了

history.pushState(data[,title][,url])：向历史记录中追加一条记录
history.replaceState(data[,title][,url])：替换当前页在历史记录中的信息
history.state：是一个属性，可以得到当前页的state信息。
window.onpopstate：是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数

区别：

前面的hashchange，你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。

• history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误
• history模式怕刷新,因为刷新是实实在在地去请求服务器的。因此需要服务端对每一个可能的path值都作相应的映射。当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

router与route的区别

1. route从当前router跳转对象里面可以获取name、path、query、params等（传的参数由 this.$route.query或者this.$route.params 接收）

2. router为VueRouter实例。想要导航到不同URL，则使用$router.push方法；返回上一个history也是使用$router.go方法