大家好，我是你的好朋友思创斯。今天说一说javascript之vue、react路由原理及实现,希望您对编程的造诣更进一步.
vue与react的路由系统非常好用，改变地址栏而不进行跳转，这跟选项卡有异曲同工之处。vue与react的路由源码有点多，这里只是说明它的原理，顺便实现一把，走你~
图片来自互联网
1、在地址栏中加入#以欺骗浏览器：地址的改变是由于正在进行页内导航。
2、使用h5的window.history功能，使用url的hash来模拟一个完整的url。这种的优势是，在地址栏中不存在#，可以避免后台需要验证地址栏的时候，出现不识别的错误。
一、hash方法：
效果：
仔细看地址栏路径
代码部分：
router.prototype.router是作为为对象赋值的一种方法，将方法放于对象中，以路径作为“key”，function作为“value”。在实例化之后，执行init方法，监听hashchange，每次地址栏路径的改变，会触发相应的方法。
hash
二、window.history方法：
效果：
看地址栏
这是html部分：
这是js部分：代码比较简单
前端是个坑，入门容易、深入难，技术的更新速度之快，令人咂舌；但是，不能追逐框架，最终要的是了解他的内在原理。好在，2018年，前端的江湖由以前的群雄逐鹿到现如今的二王分治（vue、react，同情angular一秒），对于前端工程师来说，是个好事；总之，祝愿各位前端工程师们能越走越远吧。
js555888金沙老品牌的版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由思创斯整理,转载请注明出处：https://ispacesoft.com/122789.html