路由最初是由后端提出,浏览器发出请求,服务器根据路由的配置,返回相应信息。后来随着ajax的流行,异步数据请求交互在浏览器局部刷新。单页面更是把这种方式用到了极致,不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的
1、利用H5中的history API 实现
主要利用history.pushStatae和history.replaceState来实现,不同之处在于,pushState会增加一条新的历史记录,而replaceState则会替换当前的历史记录,并且再用该方法发布项目时,还需配置一下Apache。
2、用URL的hash实现
我们在URL中常看到#,这个符号,而“#”这个符号有两种情况,一个是我们所谓的锚点,但是路由里的锚点不叫锚点,我们称之为hash,它主要利用监听hash 值的变化来触发事件 ——hashchange事件来做页面局部的更新。
总结:
两者相比较而言,hash方案兼容性好,而H5的history主要针对的高级浏览器.
两者的区别:
hash :hash 虽然出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
history :history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈,在当前已有的 back、forward、go 基础之上,它们提供了对历史记录修改的功能。只是当它们执行修改时,虽然改变了当前的 URL ,但浏览器不会立即向后端发送请求。
因此可以说, hash 模式和 history 模式都属于浏览器自身的属性,vue-router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现路由。
通过Vue.use方法对路由做一个注册,把导入的插件传进去,和Vue关联起来。这个方法会调用plugin来执行插件的install方法,所以一般写插件都会有一个install方法,install方法里,利用Vue.mixin方法给每一个组件注入钩子函数beforeCreate和destroyed前者获得路由实例,初始化路由配置。同时内置全局RouterView和RouterLink两个组件。
new Router时产生这个类的一个实例,路由初始化是在组件初始化阶段,调用beforeCreate钩子函数,执行router.init()初始化路由