浅谈Vue的路由原理

110 阅读2分钟

前言

这里是一只还在不断学习的前端小菜鸡。如有不对,欢迎指出,如有补充,欢迎留言
接下来开始正文!

讲解开始

首先,vue的项目是一个单页面应用,那么也就是说:在vue当中只有一个页面,而我们需要在不刷新页面的情况下更新视图,这个时候就由vue-router来解决这个事情~

vue-router的核心原理

vue-router的核心原理之一就是:更新视图而不重新请求页面。 而目前在浏览器环境中可以通过hash模式(url地址中的#)来实现

浏览器中的hash

hash(#)属性是一个可读可写的字符串,是URL的锚点,也就是url地址中#号开始的部分
它代表的是网页中的一个位置,只要我们修改#后面的部分,那么浏览器就会滚动到响应的位置,而不会重新加载页面,而且在我们的HTTP请求当中也不会包括#,那么也就是说#只是针对于浏览器,不会影响到服务器;而且同时每次改变#后的部分,都会在浏览器的访问历史中添加一个记录,使用后退按钮可以回到上一个位置。


好了扯完了一堆原理性的语言,总结一下就是,随便修改地址栏#后面的东西都不会触发重新刷新页面,vue-router就是根据这个来实现不刷新页面来重新渲染视图的(光说不练可不行)

简单实现简易版的vue-router跳转

结语

这只是一些个人的小理解,有什么出错的尽管帮忙修正~~~

愿世界没有BUG~~