vue路由原理剖析
Posted 想旅游咯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue路由原理剖析相关的知识，希望对你有一定的参考价值。
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面,
实现这一点主要是两种方式:
1.Hash: 通过改变hash值
2.History: 利用history对象新特性（详情可出门左拐见: http://www.cnblogs.com/yanze/p/7641774.html）
而在vue-router中，它提供mode参数来决定采用哪一种方式，选择流程如下:
默认Hash–>如果浏览器支持History新特性改用History–>如果不在浏览器环境则使用abstract
选好mode后创建history对象(HashHistory或html5History或AbstractHistory)
Hash
1.push() 设置新的路由添加历史记录并更新视图,常用情况是直接点击切换视图
调用流程:
（1） $router.push() //显式调用方法
（2） HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录（window.location.hash= XXX）
（3） History.transitionTo() //开始更新
（4） History.updateRoute() //更新路由
（5） {app._route= route}
（6） vm.render() //更新视图
2.replace
功能: 替换当前路由并更新视图，常用情况是地址栏直接输入新地址
流程与push基本一致
但流程2变为替换当前hash （window.location.replace= XXX）
3.监听地址栏变化
在setupListeners中监听hash变化(window.onhashchange)并调用replace
History
1.push
与hash模式类似，只是将window.hash改为history.pushState
2.replace
与hash模式类似，只是将window.replace改为history.replaceState
3.监听地址变化
在HTML5History的构造函数中监听popState（window.onpopstate）
两种模式对比
History模式的优点:
1.History模式的地址栏更美观。
2.History模式的pushState、replaceState参数中的新URL可为同源的任意URL（可为不同的html文件），而hash只能是同一文档
3.History模式的pushState、replaceState参数中的state可为js对象，能携带更多数据
4.History模式的pushState、replaceState参数中的title能携带字符串数据（当然，部分浏览器，例如firefox不支持title，一般title设为null，不建议使用）
缺点:
对于单页面应用来说，理想的场景是仅仅在进入应用时加载页面（例如index.html）,后续的网络操作靠ajax完成，
而不会重新请求页面。
但当用户直接在用户栏输入地址时则会重新请求，当地址带有参数时两者情况不一样
Hash 例如: xxx.com/#/id=5 HTTP请求不会包含后面的hash值，所以请求的仍然是 xxx.com,没有问题
History 例如: xxx.com/id=5 这时请求的便是xxx.com/id=5，如后端没有配置对应id=XXX的路由处理，则会返回404错误。
官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue路由原理</title> <style media="screen" type="text/css"> *{margin:0;padding:0;} li{list-style:none;} #app{width:450px;margin:0 auto;} .nav{overflow:hidden;} .nav li{float:left;margin: 10px;} </style> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="app"> <ul class="nav"> <li v-for="item in types"><a :href="\'#/\'+item.link">{{item.title}}</a></li> </ul> <component v-bind:is="show"></component> </div> <script type="text/javascript"> Vue.component(\'zy\',{ template:\'<h2>这是主页</h2>\' }) Vue.component(\'rz\',{ template:\'<h2>这是日志</h2>\' }) Vue.component(\'xc\',{ template:\'<h2>这是相册</h2>\' }) var app=new Vue({ \'el\':\'#app\', data:{ types:[ {title:\'主页\',link:\'zy\'}, {title:\'日志\',link:\'rz\'}, {title:\'相册\',link:\'xc\'} ], show:\'zy\' } }) //自定义路由，vue没有提供路由方法 function router(){ //window.location.href和window.location.hash的区别 //window.location.href 获取完整的url //window.location.hash 获取锚链接，相比如href,通过window.location.hash并不会跳转到新的链接，只会在当前链接里面改变锚链 var str=location.hash; console.log(str); str=str.slice(1); str=str.replace(/^\\//,\'\'); //获取 # 后面的值 var map={ \'zy\':true, \'rz\':true, \'xc\':true }; if(map[str]){ app.show=str; } else{ app.show=\'zy\'; } } window.addEventListener("load",router); //当hash 值改变的时候，监听hashchange事件 window.addEventListener("hashchange",router); </script> </body> </html>
源码地址： https://github.com/zuobaiquan/js-principle-analysis/blob/master/vue路由原理/index.html
以上是关于vue路由原理剖析的主要内容，如果未能解决你的问题，请参考以下文章