概念

路由这个概念首先出现在后台。传统MVC架构的web开发，由后台设置路由规则，当用户发送请求时，后台根据设定的路由规则将数据渲染到模板中，并将模板返回给用户。因此，用户每进行一次请求就要刷新一次页面，十分影响交互体验。

ajax 的出现则有效解决了这一问题。ajax （asynchronous javascript and xml），浏览器提供的一种技术方案，采用异步加载数据的方式以实现页面局部刷新，极大提升了用户体验。

而异步交互体验的更高版本就是 SPA——单页应用，不仅页面交互无刷新，甚至页面跳转之间也可以无刷新。为了实现 SPA，因此便有了 前端路由 的概念。

实现

Angular，React，Vue 都有 前端路由 的概念，但是前端路由究竟是如何实现的呢？且看下面代码：

/** * Created by lonelydawn on 2018-04-03. * javascript version: ES 6 */ import homepage from '../views/homepage.html' import product from '../views/product.html' import server from '../views/server.html' let Router = function (config) { config = config || {} // 页面容器 let app = document.getElementById(config.el) || document.body let routes = Object.prototype.toString.call(config.routes) === '[object Array]' ? config.routes : [] // 加载页面 let load = function (route) { if (route) { let beforeLoad = route.beforeLoad || function () {} let afterLoad = route.afterLoad || function () {} beforeLoad() app.innerHTML = route.template afterLoad() } } // 根据 location 的 hash 属性实现页面切换 let redirect = function () { let url = window.location.hash.slice(1) || '/' for (let route of routes) { if (url === route.url) { load(route) return } } load(routes[0]) } // 添加路由规则 this.push = function (route) { if (Object.prototype.toString.call(route) === '[object Object]') { routes.push(route) } } // 更改页面容器 this.bind = function (el) { app = document.getElementById(el) || document.body } // event window.addEventListener('load', redirect, false) // 监控 hash 变化 window.addEventListener('hashchange', redirect, false) } // 创建路由对象 let router = new Router() router.bind('app') router.push({ url: '/', template: homepage }) router.push({ url: '/product', template: product }) router.push({ url: '/server', template: server })

示例

 

源代码

demo下载

原文发布时间为：2018年04月03日
原文作者：lonelydawn 

本文来源：开源中国 如需转载请联系原作者