前端路由

前端路由的两种方式：Hash和History

Hash 模式是使用 URL 的 Hash 来模拟一个完整的 URL，因此当 URL 改变的时候页面并不会重载。History 模式则会直接改变 URL，所以在路由跳转的时候会丢失一些地址信息，在刷新或直接访问路由地址的时候会匹配不到静态资源。因此需要在服务器上配置一些信息，让服务器增加一个覆盖所有情况的候选资源，比如跳转index.html什么的，一般来说是app 依赖的页面

 

Hash原理： Hash方法是在路由中带有一个#，主要原理是通过监听#后的URL路径标识符的更改而触发的浏览器hashchange事件，然后通过获取location.hash得到当前的路径标识符，再进行一些路由跳转的操作MDN。

如下：把目标路由和对应的回调记录下来，点击跳转触发 。

class RouterClass {
  constructor() {
    this.isBack = false
    this.routes = {}        // 记录路径标识符对应的cb
    this.currentUrl = ''    // 记录hash只为方便执行cb
    this.historyStack = []  // hash栈
    window.addEventListener('load', () => this.render())
    window.addEventListener('hashchange', () => this.render())
  }
  
  /**
   * 初始化
   */
  static init() {
    window.Router = new RouterClass()
  }
  
  /**
   * 记录path对应cb
   * @param path
   * @param cb 回调
   */
  route(path, cb) {
    this.routes[path] = cb || function() {}
  }
  
  /**
   * 入栈当前hash，执行cb
   */
  render() {
    if (this.isBack) {      // 如果是由backoff进入，则置false之后return
      this.isBack = false   // 其他操作在backoff方法中已经做了
      return
    }
    this.currentUrl = location.hash.slice(1) || '/'
    this.historyStack.push(this.currentUrl)
    this.routes[this.currentUrl]()
    // console.log('refresh事件   Stack：', this.historyStack, '   currentUrl:', this.currentUrl)
  }
  
  /**
   * 路由后退
   */
  back() {
    this.isBack = true
    this.historyStack.pop()                   // 移除当前hash，回退到上一个
    const { length } = this.historyStack
    if (!length) return
    let prev = this.historyStack[length - 1]  // 拿到要回退到的目标hash
    location.hash = `#${ prev }`
    this.currentUrl = prev
    this.routes[prev]()                       // 执行对应cb
    // console.log('点击后退，当前stack：', this.historyStack, '   currentUrl:', this.currentUrl)
  }
}


RouterClass.init()
const BtnDom = document.querySelector('button')
const ContentDom = document.querySelector('.content-div')
const changeContent = content => ContentDom.innerHTML = content

Router.route('/', () => changeContent('默认页面'))
Router.route('/page1', () => changeContent('page1页面'))
Router.route('/page2', () => changeContent('page2页面'))

BtnDom.addEventListener('click', Router.back.bind(Router), false)

 

popstate：事件：当活动的历史记录发生变化，就会触发popstate事件，在点击浏览器的前进后退按钮或者调用上面前三个方法的时候也会触发;MDN

• history.pushState()
• history.popstate()
• history.replaceState()
• history.forward()  (history.go(1))
• history.back()    (history.go(-1))

 

class RouterClass {
  constructor(path) {
    this.routes = {}        // 记录路径标识符对应的cb
    history.replaceState({ path }, null, path)
    this.routes[path] && this.routes[path]()
    window.addEventListener('popstate', e => {
      console.log(e, ' --- e')
      const path = e.state && e.state.path
      this.routes[path] && this.routes[path]()
    })
  }
  
  /**
   * 初始化
   */
  static init() {
    window.Router = new RouterClass(location.pathname)
  }
  
  /**
   * 记录path对应cb
   * @param path 路径
   * @param cb 回调
   */
  route(path, cb) {
    this.routes[path] = cb || function() {}
  }
  
  /**
   * 触发路由对应回调
   * @param path
   */
  go(path) {
    history.pushState({ path }, null, path)
    this.routes[path] && this.routes[path]()
  }
}


RouterClass.init()
const ul = document.querySelector('ul')
const ContentDom = document.querySelector('.content-div')
const changeContent = content => ContentDom.innerHTML = content

Router.route('/', () => changeContent('默认页面'))
Router.route('/page1', () => changeContent('page1页面'))
Router.route('/page2', () => changeContent('page2页面'))

ul.addEventListener('click', e => {
  if (e.target.tagName === 'A') {
    e.preventDefault()
    Router.go(e.target.getAttribute('href'))
  }
})