Vue实现高效前端路由——手动模拟路由
不光后端可以实现路由,前端也可以,开启前端路由时代
在介绍前端路由之前,我们先了解一下最开始路由的起源——后端路由。
http://www.xxx.com/index
当我们在浏览器中访问这个网址时,大致会有以下的访问流程:
1、浏览器发出请求
2、服务器端的相应端口(例如:80),监听用户的请求
3、服务器端根据请求,分析请求的URL,并返回相应的数据
4、最后用户浏览器根据返回的Content-Type解析数据
那么所谓的后端路由实际上就是用户通过不同的url路径去访问不同的后端数据资源,所以在大多数的页面访问时,都是通过后端路由的方式实现页面的切换,但这样有一个不足之处:假定一个页面中,只有小部分的数据或者区域需要访问服务器更新时,如果使用后端路由,那将大大增加访问服务器的次数,这也是完全没有必要的,所以我们聪明的程序员就专研解决办法,于是就产生了一个全新的概念——前端路由
前端路由就是不发送http请求,而是在前端切换局部页面,从而减少了访问后端服务器的次数。
前端路由这么好,那我们应该怎么样实现呢?
在实现前端路由之前,我们先来剖析一下URL的结构:
以上是百度百科给出的解释,我们重点看看“#fragment”部分,fragment被称为信息片段,在一些地方也被称为锚点。我们可以这样理解它的作用:假如我是一个很爱看书的人,但是大家都知道,书一般都有很多页,几百页到几千页不等,当我看到中途时,肚子饿了,那肯定是需要去吃饭的吧?但像我这种人,又会担心会不会风一吹,把我才看的书页数吹乱了,万一记性也不好,那肯定就不知道看到哪里来了,然后还要慢慢地找到之前看到的页数,极其麻烦,这时,聪明的我终于想到了,可以用书签,这样再也不用担心这个问题了,放心大胆地去吃饭了。
那这和“#fragment”有什么关系呢?当然有关系。现在随着互联网的发展,很多页面内容非常多,结构也尤为复杂。例如一个网站上面有很多的名词,而名词的解释一般放在了一些特殊的地方,从而增强用户的阅读感,但用户有可能找不到这个地方,因此为了方便,我们就可以在每一个名词上加上锚点,这样只需要用户一点击名词,就可以自动地跳到相应的名称解释,所以锚点充当的角色就是帮助我们记录页面局部的位置。
在http请求中,锚点部分并不会被服务器响应,因此当锚点改变时,浏览器不会发送新的http请求。当锚点改变时,会自动触发window.onhashchange事件,而且可以通过location.hash来获取锚点部分改变的内容,那我们就可以通过URL的hash方式来实现前端的路由。
现在我们在实现如下功能:
这个淘宝商品详情的一个小功能模块,点击切换,但并不会发送http请求,而是局部更新,现在我们通过vue和锚点来实现。
首先我们在html部分写好静态页面结构:
<div id="app">
<ul>
<li>
<a href="#/detail">宝贝详情</a>
</li>
<li>
<a href="#/comment">累计评论</a>
</li>
<li>
<a href="#/server">专享服务</a>
</li>
</ul>
<component :is="comName"></component>
</div>
注意这里的component标签是vue专门提供用来为组件站位的,“is”属性是指定为哪个组件占位,这里我指定了一个变量,用于动态地变换.
然后创建三个自定义组件,用于当做切换的内容区:
const detail = {
template: '<div>宝贝详情</div>'
}
const comment = {
template: '<div>累计评论</div>'
}
const server = {
template: '<div>专享服务</div>'
}
接着我们在vue的components中注册这些组件:
var vm = new Vue({
el: '#app',
data: {
comName: "detail"
},
components: {
detail,
comment,
server
},
methods: {
}
});
我们把之前占位组件的指定变量初始化指向第一个组件的名称,这样就初始化好了。但还没有完,还有最关键的一步,那就是根据锚点动态地改变占位组件的指向:
window.onhashchange = function () {
switch (location.hash.slice(1)){
case '/detail':
vm.comName = 'detail'
break;
case '/comment':
vm.comName = 'comment'
break;
case '/server':
vm.comName = 'server'
break;
}
}
是通过window.onhashchange来监听URL中锚点的改变,只要锚点内容改变,就会触发这个事件,然后模拟路由,动态地改变占位组件的指向变量值,从而实现相应的效果,现在我们来看看能否实现:
虽然界面丑了一点,但是效果已经出现了,大功完成。
更多推荐
所有评论(0)