5 分钟理解 vue-router 原理

这篇具有很好参考价值的文章主要介绍了5 分钟理解 vue-router 原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue-router 原理

路由原理,是面试非常频繁常问的一个问题

面试官:你了解vue路由原理吗 ?
回答 :是利用浏览器的 history api、
面试官:具体是怎么实现的呢?
回 答 :坏了。。。。。。
文章来源地址https://www.toymoban.com/news/detail-577349.html

  • 针对路由的两种模式(hash模式、history模式)原理是不一样的
Hash 模式
  • hash模式是比较简单的, 在浏览器后拼接 #开头的 , 浏览器是不会触发更新的;
  • 可以 hashchange 去触发监听,再去加载对应的 .vue文件;
<a href='#/page1'>页面1</a>
<a href='#/page2'>页面2</a>
window.addEventListener('hashchange',function(e){
     console.log(location.hash);
})
history模式
  • history 模式需要和后端沟通,在 url 后面拼接什么,都返回该页面;
  • 进入页面后的切换,则需要 pushStatereplaceState 不触发浏览器刷新方法;
  • pushState(添加历史中) ,replaceState(替换当前历史),其他功能相同;
<button onclick='push()'>page1</button>
<button onclick='replace()'>page2</button>
<script>
	function push(){ window.history.pushState({ page:1 },'','/page1') }
	function replace(){ window.history.replaceState({ page:2 },'','/page2') }
</script>
  • 浏览器没办法去监听pushStatereplaceState 方法,所以需要手动写一个;
  • 通过dispatchEvent 触发自定义事件。
window.history.pushState = myHistoryEvent('pushState');
window.history.replaceState = myHistoryEvent('replaceState')

function myHistoryEvent(type){
     const myEvent = history[type]
     return function () {
        const e = new Event(type)
        e.arguments = arguments;
        window.dispatchEvent(e)
        return myEvent.apply(this, arguments)
      }
 }

window.addEventListener('pushState',function(e){  console.log(e)   })
window.addEventListener('replaceState',function(e){  console.log(e)  })
  • 最后我们可以 搭建本地服务进行测试;
  • 可以通过 http-server 或 启动 vue 项目 等

到了这里,关于5 分钟理解 vue-router 原理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包