Vue.js 之 前端路由的实现方法

在早期主要使用各种后端开发框架开发Web网站时候,浏览器上地址栏的切换,每次都需要刷新页面,需要向后台服务器发送请求。eg:express中,需要使用res.render()渲染某个html文件。这种就是典型的后端路由。这种路由方式可以在浏览器中使用前进和后退功能。
但是如果大量使用前后端分离。通过Ajax获取后端数据,浏览器则无法使用前进和后退功能。这时候采用前端路由就能解决这样的问题。

前端路由和单页应用

使用后端路由容易给服务器造成较大的压力,用户访问的速度很慢,需要去刷新。这时候就出现了单页应用。通过JS来控制页面的更改。eg:在使用Vue.js开发单页应用,浏览器地址栏的更改是组件之间的切换,不会像服务器发送请求。

前端路由的实现方式

location.hash+hashchange事件

浏览器地址栏输入如下地址:

www.nekomiao.me/#/blue

此时location.hash=’#/blue’.

function Router(){
this.currentUrl = '';
this.routes = {};
}
Router.prototype.route = function(path,callback){
this.routes[path] = callback;
}
Router.prototype.refresh = function(){
this.currentUrl= location.hash.slice(1);
this.routes[this.currentUrl]();
}
Router.prototype.init = function(){
window.addEventListener('load',this.refresh.bind(this),false);
window.addEventListener('hashchange',this.refresh.bind(this),false);
}

如何使用:

var router = new Router();
router.init();
router.route('/',callback);
router.route('/blue',callback);

这种方式支持浏览器的前进和后退。同时也较好的支持IE浏览器

history.pushState()+popState事件

浏览器的前进和后退都会触发window.onpopstate事件。而通过history.pushState可以在浏览器历史中添加一条记录。页面首次载入的时候,如果没有查询地址、或查询地址不匹配,使用history.replaceState更改当前的浏览器历史.
三者用法如下:

history.pushState({}, "页面标题", "xxx.html");
history.replaceState(null, "页面标题", "xxx.html");
window.addEventListener("popstate", function() {
var currentState = history.state;
/*
* 该干嘛干嘛
*/
});

如何使用:

;(function(){ //避免全局污染
var a1 = document.getElementById('a1');
var a2 = document.getElementById('a2');
var count1 = 0;
var count2 = 0;
history.replaceState({count1:count1,count2:count2},null,'');//最开始的状态,采用replace直接替换
a1.addEventListener('click',function(){
count1++;
history.pushState({count1:count1,count2:count2},null,'#/s'+count1);//之后的状态,需要进行保存
a1.innerHTML = 's'+count1;
})
a2.addEventListener('click',function(){
count2++;
history.pushState({count1:count1,count2:count2},null,'#/k'+count2);//之后的状态,需要进行保存
a2.innerHTML = 'k'+count2;
})
window.addEventListener('popstate',function(e){
console.log(e.state);
a1.innerHTML = 's'+e.state.count1;//监听popstate事件,对状态进行还原
a2.innerHTML = 'k'+e.state.count2;
})
})()

vue-router前端路由的使用

从上面知道,前端路由有两种实现方法,在Vue开发中使用vue-router组件,同样可以设置这两种路由方式
vue-router中默认是location.hash方法,此时路由的切换,URL显示如下:

http://localhost:8080/#/Test

如果要使用HTML5中history的使用方法,那么设置如下vue-router

export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/test',
name: 'Test',
component: Test
}
]
})

此时路由的切换,URL显示如下:

http://localhost:8080/Test