vue-router 源码实现前端路由的两种方式

前端之家收集整理的这篇文章主要介绍了vue-router 源码实现前端路由的两种方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在学习 vue-router 的代码之前,先来简单了解一下前端路由。

前端路由主要有两种实现方法

  • Hash 路由
  • History 路由

先来看看这两种方法的实现原理。

接着我们将用它们来简单实现一个自己的前端路由。

前端路由

Hash 路由

url 的 hash 是以 # 开头,原本是用来作为锚点,从而定位到页面的特定区域。当 hash 改变时,页面不会因此刷新,浏览器也不会向服务器发送请求。

http://www.xxx.com/#/home

同时, hash 改变时,并会触发相应的 hashchange 事件。所以,hash 很适合被用来做前端路由。当 hash 路由发生了跳转,便会触发 hashchange 回调,回调里可以实现页面更新的操作,从而达到@R_13_404@面的效果

History 路由

HTML5 规范中提供了 history.pushStatehistory.replaceState 来进行路由控制。通过这两个方法,可以实现改变 url 且不向服务器发送请求。同时不会像 hash 有一个 # ,更加的美观。但是 History 路由需要服务器的支持,并且需将所有的路由重定向到根页面

History 路由的改变不会去触发某个事件,所以我们需要去考虑如何触发路由更新后的回调。

有以下两种方式会改变 url:

  • 调用 history.pushState 或 history.replaceState;
  • 点击浏览器的前进与后退。

第一个方式可以封装一个方法,在调用 pushState(replaceState)后再调用回调。

function handleHref () {
console.log('render');
}

第二个方式,浏览器的前进与后退会触发 popstate 事件。

路由实现

我们通过 标签来进行切换路由,通过一个

Router代码实现如下:

this.init();

// 遍历,绑定视图更新
options.forEach(item => {
this.route(item.path,() => {
document.getElementById('content').innerHTML = item.component;
});
});
}

// 绑定监听事件
init () {
window.addEventListener('load',this.updateView.bind(this),false);
window.addEventListener('hashchange',false);
}

// 更新试图
updateView () {
const currentUrl = window.location.hash.slice(1) || '/';
this.routes[currentUrl] && this.routes[currentUrl]();
}

// 将路由与回调函数关联
route (path,cb) {
this.routes[path] = cb;
}
}

实现效果如下:

History 路由实现

History 路由需要服务器的支持,可以点击这里代码参考。

home book movie

<div id="content">

Router代码实现如下:

this.init();
this.bindEvent();

// 遍历,绑定视图更新
options.forEach(item => {
this.route(item.path,() => {
document.getElementById('content').innerHTML = item.component;
});
});
}

// 绑定点击事件
bindEvent () {
const _this = this;
const links = document.getElementsByTagName('a');

[].forEach.call(links,link => {
link.addEventListener('click',function () {
const url = this.getAttribute('data-href');
_this.push(url);
});
});
}

// 绑定监听事件
init () {
window.addEventListener('load',false);
window.addEventListener('popstate',false);
}

push (url) {
window.history.pushState({},url);
this.updateView();
}

// 更新试图
updateView () {
const currentUrl = window.location.pathname || '/';
this.routes[currentUrl] && this.routes[currentUrl]();
}

// 将路由与回调函数关联
route (path,cb) {
this.routes[path] = cb;
}
}

实现效果如下:

最后

  1. Hash 路由
  2. History 路由

修改 url 的同时不刷新页面,不向服务器发送请求,通过监听特殊的事件来更新页面

这里。

内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/31709.html

猜你在找的Vue相关文章