Vue Router的原理学习

Vue Router 是有三种种的方法 

 

1. hash 

　hash("#") 的作用是加载 URL 中指示网页中的位置。 这句话其实就是说只能改变#后面的url字段

　# 本身以及它后面的字符称职位 hash，可通过 window.location.hash 获取

 

更改URL是使用到了 

HashHistory.push() 与 HashHistory .repalce()

 

2.  history 使用：HTML5History

　　这个是使用window.histroy.pushState() 与 window.history.replaceState() 上面  这个两个方法是写在history的原型之中的

　　在HTML5History的构造函数中监听popState（window.onpopstate）

 

两个的区别 ：

　　1. pushState 可以是新的url，但是hash方法只能同一个url 更改#/后面的短字段

　　2. 美观性，肯定没有#好看

　　3. HTML5History 缺点后端配置对应/user/id的路由处理，则会返回404错误

这个 abstract 是给服务端使用的。

 

先是Vue有个instrall 先把vue-router的实例挂在到vue上面去，就是vue.use，这个install还实现了router-view和router-link这个两个全局的组件实在beforecreated上，针对router的响应式使用到Vue的definereactive注册一个_routerhistory属性这样histroy模式就是响应式的了，当路由发生变化的时候，就会触发router-view的组件，router-view就会触发render函数，就发现重新的渲染。

 

它们的区别：

　　这个的不足点就是在浏览器的刷新和用户自己的手动的输入url地址。

　　例如htttp://www.abc.com/book/id，这个是使用了history模式，http://www.abc.com/#/book/id这个是使用了hash模式，只会发出http://www.abc.com的请求然后喵点book/id

　　如果htttp://www.abc.com/book/id，它是直接请求到了htttp://www.abc.com/book/id，如果后端没有对这个地址有定义就是会出现404的错误，但是如果是hash模式只是会出现白屏。