什么是前端路由？
在单页面中，路由描述的是URL和UI之间的单向映射关系，即URL的变化引起UI的更新，不需要刷新。
核心原理之一：它只是更新视图，不重新请求页面
两种方式：1、hash 利用URL中的hash（“#”） 2、利用history interface在h5中新增的方法
Hash和history的区别？
要实现前端路由，需要解决两个核心：
1、如何改变URL不引起页面的刷新？
2、如何检测URL更新了？
分别从hash和history两种方式实现上面的两个核心问题：
1、hash模式
Hash是url中hash(‘#’)及后面的部分，常用作锚点在页面进行导航
通过hashchange事件监听URL的变化，改变url的方式只有这几种：
(1)通过浏览器的前进和后退改变URL
(2)通过<a>标签改变URL
(3)通过window.location改变URL
2、History模式
history提供了pushState和replaceState两个方法，history提供类似hashchange事件的popstate事件，但popstate事件有些不同：
(1)通过浏览器前进后退改变URL时会出发popstate事件
(2)通过pushState和replaceState或者<a>标签改变URL不会触发popstate事件
(3)但是我们可以拦截pushState和replaceState的调用或者<a>标签的点击事件来检测URL的变化
(4)通过js调用history的back、go、forward方法可触发该事件
Vue Router的核心是，通过Vue.use注册插件，在插件的install方法中获取用户配置的router对象。当浏览器地址发生变化的时候，根据router对象匹配相应的路由，获取组件，然后把组件渲染在视图上。
(1)如何在install方法中获取用户配置的router对象
可以利用在Vue.mixin混入生命周期函数beforeCreate，在beforeCreate函数中可以获取到vue实例上的属性并赋值到vue原型链上。
(2)如何触发更新
Hash模式下：
通过location.hash改变hsh值，触发更新，
通过监听hashchange实践监听浏览器前进或者后退，触发更新。
History模式下：
通过history.pushState修改浏览器地址，触发更新；
通过监听popstate事件监听浏览器前进或者后退，触发更新；
如何渲染router-view组件；
通过Vue.observable在router实例上创建一个保存当前路由的监控对象current，
当浏览器地址变化的时候，改变监控对象current；
在router-view组建中监听监控对象current的变化，当current变化后，获取用户注册的相应component，并利用h函数将component渲染成vnodes，进而更新页面视图。
网友评论