Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > js框架/js库

浅析前端路由简介以及vue-router实现原理

来源:中文源码网    浏览:198 次    日期:2024-03-20 16:09:42
【下载文档:  浅析前端路由简介以及vue-router实现原理.txt 】


浅析前端路由简介以及vue-router实现原理
路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样
http://www.xxx.com/login
大致流程可以看成这样:
浏览器发出请求
服务器监听到80端口(或443)有请求过来,并解析url路径
根据服务器的路由配置,返回相应信息(可以是 html 字串,也可以是 json 数据,图片等)
浏览器根据数据包的 Content-Type 来决定如何解析数据
简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。
前端路由
1. hash 模式
随着 ajax 的流行,异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA ―― 单页应用。单页应用不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用,所以就有了前端路由。 类似于服务端路由,前端路由实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,然后动态的渲染出区域 html 内容。但是这样存在一个问题,就是 url 每次变化的时候,都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下,保证页面的不刷新。在 2014 年之前,大家是通过 hash 来实现路由,url hash 就是类似于:
http://www.xxx.com/#/login
这种 #。后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。另外每次 hash 值的变化,还会触发 hashchange 这个事件,通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新页面部分内容的操作:
function matchAndUpdate () {
// todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)
2. history 模式
14年后,因为HTML5标准发布。多了两个 API, pushState 和 replaceState ,通过这两个 API 可以改变 url 地址且不会发送请求。同时还有 popstate 事件。通过这些就能用另一种方式来实现前端路由了,但原理都是跟 hash 实现相同的。用了 HTML5 的实现,单页路由的 url 就不会多出一个#,变得更加美观。但因为没有 # 号,所以当用户刷新页面之类的操作时,浏览器还是会给服务器发送请求。为了避免出现这种情况,所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面。
function matchAndUpdate () {
// todo 匹配路径 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)
Vue router 实现
我们来看一下 vue-router 是如何定义的:
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: [...]
})
new Vue({
router
...
})
可以看出来 vue-router 是通过 Vue.use 的方法被注入进 Vue 实例中,在使用的时候我们需要全局用到 vue-router 的 router-view 和 router-link 组件,以及 this.$router/$route 这样的实例对象。那么是如何实现这些操作的呢?下面我会分几个章节详细的带你进入 vue-router 的世界。(阅读源码是有点枯燥,但是带着问题去了解,就感觉很有意思。如果你对 vue-router 的实现机制也存在一些疑问,可以一起探讨交流)
vue-router 实现 -- install
vue-router 实现 -- new VueRouter(options)
vue-router 实现 -- HashHistory
未完待续...
更多 blog
总结
以上所述是小编给大家介绍的前端路由简介以及vue-router实现原理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持!

相关内容