前端路由的简单实现

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

概念

路由这个概念首先出现在后台。传统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
})

示例

 

173946_Nqnm_2660780.gif

源代码

demo下载

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

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


目录
相关文章
|
5月前
|
移动开发 前端开发 API
深入理解前端路由:构建现代 Web 应用的基石(上)
深入理解前端路由:构建现代 Web 应用的基石(上)
深入理解前端路由:构建现代 Web 应用的基石(上)
|
5月前
|
前端开发 搜索推荐 UED
解密前端路由: hash模式vs.history模式
解密前端路由: hash模式vs.history模式
|
5月前
|
移动开发 前端开发 JavaScript
前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
361 0
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
59 3
|
10天前
|
存储 JavaScript 前端开发
前端 vue:路由的高级使用
前端 vue:路由的高级使用
|
10天前
|
资源调度 JavaScript 前端开发
前端vue:路由的基本使用
前端vue:路由的基本使用
|
12天前
|
移动开发 前端开发 JavaScript
浅谈前端路由原理hash和history
该文章详细解析了前端路由的两种模式——Hash模式与History模式的工作原理及其实现方式,并通过实例代码展示了如何在实际项目中运用这两种路由模式。
|
20天前
|
移动开发 缓存 前端开发
构建高效的前端路由系统:从原理到实践
在现代Web开发中,前端路由系统已成为构建单页面应用(SPA)不可或缺的核心技术之一。不同于传统服务器渲染的多页面应用,SPA通过前端路由技术实现了页面的局部刷新与无缝导航,极大地提升了用户体验。本文将深入剖析前端路由的工作原理,包括Hash模式与History模式的实现差异,并通过实战演示如何在Vue.js框架中构建一个高效、可维护的前端路由系统。我们还将探讨如何优化路由加载性能,确保应用在不同网络环境下的流畅运行。本文不仅适合前端开发者深入了解前端路由的奥秘,也为后端转前端或初学者提供了从零到一的实战指南。
|
5月前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
259 0
|
3月前
|
开发框架 JSON 前端开发
Vue&Element 前端应用开发之菜单和路由的关系
Vue&Element 前端应用开发之菜单和路由的关系