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

前端路由实现方式

路由需要实现三个功能:

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

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

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

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

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

hash路由

首先定义一个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标签链接实现

<nav id="nav" class="nav-tab">
  <ul class='tab'>
    <li><a class='nav-item' href="#/index">首页</a></li>
    <li><a class='nav-item' href="#/subscribe">观察者</a></li>
    <li><a class='nav-item' href="#/proxy">代理</a></li>
    <li><a class='nav-item' href="#/state">状态管理</a></li>
    <li><a class='nav-item' href="#/dom">虚拟DOM</a></li>
  </ul>
</nav>
<div id="container" class='container'>
  <div id="main" class='main'></div>
</div>

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[index]==this.currentURLlist[index]) {
      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'})

history 路由

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