vue-roter路由配置的3种模式介绍

根据vue-router官网，我们可以明确看到vue-router的mode值有3种分别是hash、history、abstract，其中，hash 和 history 是 SPA 单页应用程序的基础。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

默认使用的是 hash 模式，当设置为 history 时，如果不支持 history 方法，也会强制使用 hash 模式。 当不在浏览器环境，比如 node 中时，直接强制使用 abstract 模式。

class vueRouter {
  constructor(options) {
    let mode = options.mode || 'hash'
    this.fallback =
    mode === 'history' && !supportsPushState && options.fallback !== false
    if (this.fallback) {
        mode = 'hash'
    }
    if (!inBrowser) {
        mode = 'abstract'
    }
    this.mode = mode
    
    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':
        this.history = new AbstractHistory(this, options.base)
        break
      default:
        if (process.env.NODE_ENV !== 'production') {
          assert(false, `invalid mode: ${mode}`)
        }
    }
  }
}

hash模式

/src/history/hash.js

const handleRoutingEvent = () => {
  const current = this.current
  if (!ensureSlash()) {
    return
  }
  this.transitionTo(getHash(), route => {
    if (supportsScroll) {
      handleScroll(this.router, route, current, true)
    }
    if (!supportsPushState) {
      replaceHash(route.fullPath)
    }
  })
}
const eventType = supportsPushState ? 'popstate' : 'hashchange'
window.addEventListener(
  eventType,
  handleRoutingEvent
)
this.listeners.push(() => {
  window.removeEventListener(eventType, handleRoutingEvent)
})

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  const { current: fromRoute } = this
  this.transitionTo(
    location,
    route => {
      pushHash(route.fullPath)
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    },
    onAbort
  )
}

replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  const { current: fromRoute } = this
  this.transitionTo(
    location,
    route => {
      replaceHash(route.fullPath)
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    },
    onAbort
  )
}

vue-router 的2个主要API push 和 replace 也是简单处理了下 hash , 然后调用 transitionTo 方法更新视图

history模式

window.onpopstate = function(e) {
   alert('bar');
}

let stateObj = {
    foo: "bar",
};

history.pushState(stateObj, "page 2", "bar.html");

const handleRoutingEvent = () => {
  const current = this.current

  // Avoiding first `popstate` event dispatched in some browsers but first
  // history route not updated since async guard at the same time.
  const location = getLocation(this.base)
  if (this.current === START && location === this._startLocation) {
    return
  }

  this.transitionTo(location, route => {
    if (supportsScroll) {
      handleScroll(router, route, current, true)
    }
  })
}
window.addEventListener('popstate', handleRoutingEvent)
this.listeners.push(() => {
  window.removeEventListener('popstate', handleRoutingEvent)
})

处理逻辑和 hash 相似，使用 window.addEventListener("popstate", fun) 监听路由的变化,然后使用 transitionTo 方法更新视图。 push 和 replace 等方法就不再详细介绍。

abstract模式

/src/history/abstract.js

constructor (router: Router, base: ?string) {
  super(router, base)
  this.stack = []
  this.index = -1
}

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  this.transitionTo(
    location,
    route => {
      this.stack = this.stack.slice(0, this.index + 1).concat(route)
      this.index++
      onComplete && onComplete(route)
    },
    onAbort
  )
}

replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  this.transitionTo(
    location,
    route => {
      this.stack = this.stack.slice(0, this.index).concat(route)
      onComplete && onComplete(route)
    },
    onAbort
  )
}

push 和 replac方法 也是通过 stack 和 index 2个变量，模拟出浏览器的历史调用记录。

总结：

• hash 和 history 的使用方式差不多，hash 中路由带 # ，但是使用简单，不需要服务端配合，站在技术角度讲，这个是配置最简单的模式，本人感觉这也是 hash 被设为默认模式的原因
• history 模式需要服务端配合处理404的情况，但是路由中不带 # ，比 hash 美观一点。
• abstract 模式支持所有JavaScript运行环境，如Node.js服务器端，如果发现没有浏览器的API，路由会自动强制进入这个模式。
• abstract 模式没有使用浏览器api，可以放到node环境或者桌面应用中，是对 spa应用 的兜底和能力扩展。