自己动手实现一个前端路由

摘要：单页面应用利用了动态变换网页内容避免了页面重载路由则提供了浏览器地址变化网页内容也跟随变化两者结合起来则为我们提供了体验良好的单页面应用前端路由实现方式路由需要实现三个功能浏览器地址变化切换页面点击浏览器后退前进按钮，网页内容跟随变化刷新浏

单页面应用利用了JavaScript动态变换网页内容,避免了页面重载;路由则提供了浏览器地址变化,网页内容也跟随变化,两者结合起来则为我们提供了体验良好的单页面web应用

路由需要实现三个功能:

​ ①浏览器地址变化,切换页面;

​ ②点击浏览器【后退】、【前进】按钮，网页内容跟随变化；

​ ③刷新浏览器，网页加载当前路由对应内容

在单页面web网页中,单纯的浏览器地址改变,网页不会重载,如单纯的hash网址改变网页不会变化,因此我们的路由主要是通过监听事件,并利用js实现动态改变网页内容,有两种实现方式:

hash路由: 监听浏览器地址hash值变化,执行相应的js切换网页
history路由: 利用history API实现url地址改变,网页内容改变

首先定义一个Router类

class Router {
  constructor(obj) {
    // 路由模式
    this.mode = obj.mode
    // 配置路由
    this.routes = {
      "/index"                : "views/index/index",
      "/index/detail"         : "views/index/detail/detail",
      "/index/detail/more"    : "views/index/detail/more/more",
      "/subscribe"            : "views/subscribe/subscribe",
      "/proxy"                : "views/proxy/proxy",
      "/state"                : "views/state/stateDemo",
      "/state/sub"            : "views/state/components/subState",
      "/dom"                  : "views/visualDom/visualDom",
      "/error"                : "views/error/error"
    }
    this.init()
  }
}

路由初始化init()时监听load,hashchange两个事件:

window.addEventListener("load", this.hashRefresh.bind(this), false);
window.addEventListener("hashchange", this.hashRefresh.bind(this), false);

浏览器地址hash值变化直接通过a标签链接实现

hash值变化后,回调方法:

/**
 * hash路由刷新执行
 */
hashRefresh() {
  // 获取当前路径,去掉查询字符串,默认"/index"
  var currentURL = location.hash.slice(1).split("?")[0] || "/index";
  this.name = this.routes[this.currentURL]
  this.controller(this.name)
}
/**
  * 组件控制器
  * @param {string} name 
  */
controller(name) {
  // 获得相应组件
  var Component = require("../" + name).default;
  // 判断是否已经配置挂载元素,默认为$("#main")
  var controller = new Component($("#main"))
}

有位同学留言要实现路由懒加载,参考vue的实现方式,这里贴出来,希望大家多提意见:

  /**
   * 懒加载路由组件控制器
   * @param {string} name 
   */
  controller(name) {
    // import 函数会返回一个 Promise对象,属于es7范畴,需要配合babel的syntax-dynamic-import插件使用
    var Component = ()=>import("../"+name);
    Component().then(resp=>{
      var controller = new resp.default($("#main"))
    })
  }

考虑到存在多级页面嵌套路由的存在,需要对嵌套路由进行处理:

直接子页面路由时,按父路由到子路由的顺序加载页面

父页面已经加载,再加载子页面时,父页面保留,只加载子页面

改造后的路由刷新方法为:

hashRefresh() {
  // 获取当前路径,去掉查询字符串,默认"/index"
  var currentURL = location.hash.slice(1).split("?")[0] || "/index";  
  // 多级链接拆分为数组,遍历依次加载
  this.currentURLlist = currentURL.slice(1).split("/")
  this.url = ""
  this.currentURLlist.forEach((item, index) => {
    // 导航菜单激活显示
    if (index === 0) {
      this.navActive(item)
    }
    this.url += "/" + item
    this.name = this.routes[this.url]
    // 404页面处理
    if (!this.name) {
      location.href = "#/error"
      return false
    }
    // 对于嵌套路由的处理
    if (this.oldURL && this.oldURL[0]==this.currentURLlist[0]) {
      this.handleSubRouter(item,index)
    } else {
      this.controller(this.name)
    }
  });
  // 记录链接数组,后续处理子级组件
  this.oldURL = JSON.parse(JSON.stringify(this.currentURLlist))
}
/**
  * 处理嵌套路由
  * @param {string} item 链接list中当前项
  * @param {number} index 链接list中当前索引
  */
handleSubRouter(item,index){
  // 新路由是旧路由的子级
  if (this.oldURL.length < this.currentURLlist.length) {
    // 相同路由部分不重新加载
    if (item !== this.oldURL[index]) {
      this.controller(this.name)
    }
  }
  // 新路由是旧路由的父级
  if (this.oldURL.length > this.currentURLlist.length) {
    var len = Math.min(this.oldURL.length, this.currentURLlist.length)
    // 只重新加载最后一个路由
    if (index == len - 1) {
      this.controller(this.name)
    }
  }
}                

这样,一个hash路由组件就实现了

使用时,只需new一个Router实例即可:new Router({mode:"hash"})

window.history属性指向 History 对象,是浏览器的一个属性,表示当前窗口的浏览历史,History 对象保存了当前窗口访问过的所有页面地址。更多了解History对象,可参考阮一峰老师的介绍: History 对象

webpack开发环境下,需要在devServer对象添加以下配置:
historyApiFallback: {
  rewrites: [
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, "index.html") },
  ],
}

history路由主要是通过history.pushState()方法向浏览记录中添加一条历史记录,并同时触发js回调加载页面

当【前进】、【后退】时，会触发history.popstate 事件,加载history.state中存放的路径

history路由实现与hash路由的步骤类似,由于需要配置路由模式切换,页面中所有的a链接都采用了hash类型链接,history路由初始化时,需要拦截a标签的默认跳转:

  /**
   * history模式劫持 a链接
   */
  bindLink() {
    $("#nav").on("click", "a.nav-item", this.handleLink.bind(this))
  }
 /**
   * history 处理a链接
   * @param  e 当前对象Event
   */
  handleLink(e) {
    e.preventDefault();
    // 获取元素路径属性
    let href = $(e.target).attr("href")
    // 对非路由链接直接跳转
    if (href.slice(0, 1) !== "#") {
      window.location.href = href
    } else {
      let path = href.slice(1)
      history.pushState({
        path: path
      }, null, path)
      // 加载相应页面
      this.loadView(path.split("?")[0])
    }
  }

history路由初始化需要绑定load、popstate事件

this.bindLink()
window.addEventListener("load", this.loadView.bind(this, location.pathname));
window.addEventListener("popstate", this.historyRefresh.bind(this));

浏览是【前进】或【后退】时,触发popstate事件,执行回调函数

/**
  * history模式刷新页面
  * @param  e  当前对象Event
  */
historyRefresh(e) {
  const state = e.state || {}
  const path = state.path.split("?")[0] || null
  if (path) {
    this.loadView(path)
  }
}

history路由模式首次加载页面时,可以默认一个页面,这时可以用history.replaceState方法

if (this.mode === "history" && currentURL === "/") {
  history.replaceState({path: "/"}, null, "/")
  currentURL = "/index"
}

对于404页面的处理,也类似

history.replaceState({path: "/error"}, null, "/error")
this.loadView("/error")

点击预览

更多源码请访问Github