vue-router 源码实现前端路由的两种方式
在学习 vue-router 的代码之前，先来简单了解一下前端路由。
前端路由主要有两种实现方法：
- Hash 路由
- History 路由
先来看看这两种方法的实现原理。
接着我们将用它们来简单实现一个自己的前端路由。
前端路由
Hash 路由
url 的 hash 是以 # 开头，原本是用来作为锚点，从而定位到页面的特定区域。当 hash 改变时，页面不会因此刷新，浏览器也不会向服务器发送请求。
http://www.xxx.com/#/home
同时， hash 改变时，并会触发相应的 hashchange 事件。所以，hash 很适合被用来做前端路由。当 hash 路由发生了跳转，便会触发 hashchange 回调，回调里可以实现页面更新的操作，从而达到跳转页面的效果。
window.addEventListener('hashchange', function () {
console.log('render');
});
History 路由
HTML5 规范中提供了 history.pushState 和 history.replaceState 来进行路由控制。通过这两个方法，可以实现改变 url 且不向服务器发送请求。同时不会像 hash 有一个 # ，更加的美观。但是 History 路由需要服务器的支持，并且需将所有的路由重定向到根页面。
History 路由的改变不会去触发某个事件，所以我们需要去考虑如何触发路由更新后的回调。
有以下两种方式会改变 url：
- 调用 history.pushState 或 history.replaceState；
- 点击浏览器的前进与后退。
第一个方式可以封装一个方法，在调用 pushState（replaceState）后再调用回调。
function push (url) {
window.history.pushState({}, null, url);
handleHref();
}
function handleHref () {
console.log('render');
}
第二个方式，浏览器的前进与后退会触发 popstate 事件。
window.addEventListener('popstate', handleHref);
路由实现
我们通过 <a> 标签来进行切换路由，通过一个 <div> 标签来装载各路由对应的页面内容。
参考 vue-router 的调用，我们会这么地调用一个 Router ，将路由与对应组件作为参数传入：
const router = new Router([
{
path: '/',
component: 'home'
},
{
path: '/book',
component: 'book'
},
{
path: '/movie',
component: 'movie'
}
]);
数组里是各路由对应的要显示的内容，接下来就来开始实现这个 Router 。
Hash 路由实现
Hash 路由 <a> 标签都需要带上 # ：
<div> <a href="#/" rel="external nofollow" >home</a> <a href="#/book" rel="external nofollow" >book</a> <a href="#/movie" rel="external nofollow" >movie</a> <div id="content"></div> </div>
Router 的代码实现如下：
class Router {
constructor (options) {
this.routes = {};
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', this.updateView.bind(this), false);
}
// 更新试图
updateView () {
const currentUrl = window.location.hash.slice(1) || '/';
this.routes[currentUrl] && this.routes[currentUrl]();
}
// 将路由与回调函数关联
route (path, cb) {
this.routes[path] = cb;
}
}
实现效果如下：
History 路由实现
History 路由需要服务器的支持，可以点击这里 的代码参考。
<div> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-href="/" rel="external nofollow" >home</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-href="/book" rel="external nofollow" >book</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-href="/movie" rel="external nofollow" >movie</a> <div id="content"></div> </div>
Router 的代码实现如下：
class Router {
constructor (options) {
this.routes = {};
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', this.updateView.bind(this), false);
window.addEventListener('popstate', this.updateView.bind(this), false);
}
push (url) {
window.history.pushState({}, null, url);
this.updateView();
}
// 更新试图
updateView () {
const currentUrl = window.location.pathname || '/';
this.routes[currentUrl] && this.routes[currentUrl]();
}
// 将路由与回调函数关联
route (path, cb) {
this.routes[path] = cb;
}
}
实现效果如下：
最后
前端路由实现方式有两种，分别是：
- Hash 路由
- History 路由
原理都是修改 url 的同时不刷新页面，不向服务器发送请求，通过监听特殊的事件来更新页面。
以上实现全部源码参考这里。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
uniapp的顶部导航栏有时候不符合设计需求,我们可以自定义顶部导航栏,下面这篇文章主要给大家介绍了关于uniapp自定义导航栏的保姆级教程,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了适合前端Vue开发童鞋的跨平台Weex的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以这篇文章主要给大家介绍了关于Vue中自定义全局组件的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程，包含发布到npm，构建自己的npm包，供下载安装使用的技巧,非常不错，具有一定的参考借鉴价值，感兴趣的朋友跟随脚本之家小编一起看看吧2018-05-05
这篇文章主要介绍了Vue切换div显示隐藏,多选，单选代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
购物车是电商必备的功能,可以让用户一次性购买多个商品,下面这篇文章主要给大家介绍了关于前端Vue学习之购物车项目的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了vue实现选项卡案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue el-upload上传文件的示例代码，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
最新评论