Vue路由History模式分析

Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，通过引入Vue-router对象模块时配置mode属性可以启用history模式。

描述

Vue-router的hash模式使用URL的Hash来模拟一个完整的URL，当URL改变时页面不会重新加载，而Vue-router的history模式是充分利用history.pushState的API来完成URL跳转，同样在页面跳转时无须重新加载页面，当然也不会对于服务端进行请求，当然对于history模式仍然是需要后端的配置支持，由于应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问URL时就会返回404，所以需要在服务端增加一个覆盖所有情况的候选资源，如果URL匹配不到任何静态资源时，则应该返回同一个index.html应用依赖页面，例如在Nginx下的配置。

  1. location / {
  2.   try_files $uri $uri/ /index.html;
  3. }

分析

Vue-router源码的实现比较复杂，会处理各种兼容问题与异常以及各种条件分支，文章分析比较核心的代码部分，精简过后的版本，重要部分做出注释，commit id为560d11d。

首先是在定义Router时调用Vue.use(VueRouter)，这是Vue.js插件的经典写法，给插件对象增加install方法用来安装插件具体逻辑，此时会调用VueRouter类上的静态方法，即VueRouter.install = install，install模块主要是保证Vue-router只被use一次，以及通过mixin在Vue的生命周期beforeCreate内注册实例，在destroyed内销毁实例，还有定义$router与$route属性为只读属性以及<router-view>与<router-link>全局组件的注册。

  1. // dev/src/install.js line 6
  2. export function install (Vue) {
  3.   if (install.installed && _Vue === Vue) return
  4.   install.installed = true // 保证 Vue-router 只被 use 一次
  6.   _Vue = Vue
  8.   const isDef = v => v !== undefined
  10.   const registerInstance = (vm, callVal) => {
  11.     let i = vm.$options._parentVnode
  12.     if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
  13.       i(vm, callVal)
  14.     }
  15.   }
  17.   Vue.mixin({
  18.     beforeCreate () { // 注册实例
  19.       if (isDef(this.$options.router)) { // this.$options.router 来自于 VueRouter 的实例化 // 判断实例是否已经挂载
  20.         this._routerRoot = this
  21.         this._router = this.$options.router
  22.         this._router.init(this) // // 调用 VueRouter 的 init 方法 // 后文会说明 init 方法的作用
  23.         Vue.util.defineReactive(this, '_route', this._router.history.current)
  24.       } else {
  25.         this._routerRoot = (this.$parent && this.$parent._routerRoot) || this // 将组件的 _routerRoot 都指向根 Vue 实例
  26.       }
  27.       registerInstance(this, this)
  28.     },
  29.     destroyed () { // 销毁实例 即挂载undefined
  30.       registerInstance(this)
  31.     }
  32.   })
  34.   Object.defineProperty(Vue.prototype, '$router', {
  35.     get () { return this._routerRoot._router }
  36.   })
  38.   Object.defineProperty(Vue.prototype, '$route', {
  39.     get () { return this._routerRoot._route }
  40.   })
  42.   Vue.component('RouterView', View) // 注册全局组件 <router-view>
  43.   Vue.component('RouterLink', Link) // 注册全局组件 <router-link>
  45.   const strats = Vue.config.optionMergeStrategies
  46.   // use the same hook merging strategy for route hooks
  47.   strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
  48. }

之后是VueRouter对象的构造函数，主要是先获取mode的值，如果mode的值为history但是浏览器不支持history模式,那么就强制设置mode值为hash，接下来根据mode的值，来选择vue-router使用哪种模式。

  1. // dev/src/index.js line 40
  2. constructor (options: RouterOptions = {}) {
  3.   this.app = null
  4.   this.apps = []
  5.   this.options = options
  6.   this.beforeHooks = []
  7.   this.resolveHooks = []
  8.   this.afterHooks = []
  9.   this.matcher = createMatcher(options.routes || [], this) // 创建路由匹配对象
  11.   let mode = options.mode || 'hash'
  12.   this.fallback =
  13.     mode === 'history' && !supportsPushState && options.fallback !== false // 检车兼容
  14.   if (this.fallback) {
  15.     mode = 'hash'
  16.   }
  17.   if (!inBrowser) {
  18.     mode = 'abstract'
  19.   }
  20.   this.mode = mode
  22.   switch (mode) {
  23.     case 'history':
  24.       this.history = new HTML5History(this, options.base) // 实例化history模式
  25.       break
  26.     case 'hash':
  27.       this.history = new HashHistory(this, options.base, this.fallback) // 实例化Hash模式
  28.       break
  29.     case 'abstract':
  30.       this.history = new AbstractHistory(this, options.base)
  31.       break
  32.     default:
  33.       if (process.env.NODE_ENV !== 'production') {
  34.         assert(false, `invalid mode: ${mode}`)
  35.       }
  36.   }
  37. }

在构造函数中调用了创建路由匹配对象的方法createMatcher，而在createMatcher中又调用了实际用以创建路由映射表的方法createRouteMap，可以说createMatcher函数的作用就是创建路由映射表，然后通过闭包的方式让addRoutes和match函数能够使用路由映射表的几个对象，最后返回一个Matcher对象。

  1. // dev/src/create-matcher.js line 16
  2. export function createMatcher (
  3.   routes: Array<RouteConfig>,
  4.   router: VueRouter
  5. ): Matcher {
  6.   const { pathList, pathMap, nameMap } = createRouteMap(routes) // 创建路由映射表
  8.   function addRoutes (routes) {
  9.     createRouteMap(routes, pathList, pathMap, nameMap)
  10.   }
  12.   function match ( // 路由匹配
  13.     raw: RawLocation,
  14.     currentRoute?: Route,
  15.     redirectedFrom?: Location
  16.   ): Route {
  17.     const location = normalizeLocation(raw, currentRoute, false, router) // location 是一个对象，类似于 {"_normalized":true,"path":"/","query":{},"hash":""}
  18.     const { name } = location
  20.     if (name) { // 如果有路由名称 就进行nameMap映射
  21.       const record = nameMap[name]  // nameMap[name] = 路由记录
  22.       if (process.env.NODE_ENV !== 'production') {
  23.         warn(record, `Route with name '${name}' does not exist`)
  24.       }
  25.       if (!record) return _createRoute(null, location)
  26.       const paramNames = record.regex.keys
  27.         .filter(key => !key.optional)
  28.         .map(key => key.name)
  30.       if (typeof location.params !== 'object') {
  31.         location.params = {}
  32.       }
  34.       if (currentRoute && typeof currentRoute.params === 'object') {
  35.         for (const key in currentRoute.params) {
  36.           if (!(key in location.params) && paramNames.indexOf(key) > -1) {
  37.             location.params[key] = currentRoute.params[key]
  38.           }
  39.         }
  40.       }
  42.       location.path = fillParams(record.path, location.params, `named route "${name}"`)
  43.       return _createRoute(record, location, redirectedFrom)
  44.     } else if (location.path) { // 如果路由配置了path，到pathList和PathMap里匹配到路由记录
  45.       location.params = {}
  46.       for (let i = 0; i < pathList.length; i++) {
  47.         const path = pathList[i]
  48.         const record = pathMap[path]
  49.         if (matchRoute(record.regex, location.path, location.params)) {
  50.           return _createRoute(record, location, redirectedFrom)
  51.         }
  52.       }
  53.     }
  54.     // no match
  55.     return _createRoute(null, location)
  56.   }
  58.   function redirect ( // 处理重定向
  59.     record: RouteRecord,
  60.     location: Location
  61.   ): Route {
  62.     const originalRedirect = record.redirect
  63.     let redirect = typeof originalRedirect === 'function'
  64.       ? originalRedirect(createRoute(record, location, null, router))
  65.       : originalRedirect
  67.     if (typeof redirect === 'string') {
  68.       redirect = { path: redirect }
  69.     }
  71.     if (!redirect || typeof redirect !== 'object') {
  72.       if (process.env.NODE_ENV !== 'production') {
  73.         warn(
  74.           false, `invalid redirect option: ${JSON.stringify(redirect)}`
  75.         )
  76.       }
  77.       return _createRoute(null, location)
  78.     }
  80.     const re: Object = redirect
  81.     const { name, path } = re
  82.     let { query, hash, params } = location
  83.     query = re.hasOwnProperty('query') ? re.query : query
  84.     hash = re.hasOwnProperty('hash') ? re.hash : hash
  85.     params = re.hasOwnProperty('params') ? re.params : params
  87.     if (name) {
  88.       // resolved named direct
  89.       const targetRecord = nameMap[name]
  90.       if (process.env.NODE_ENV !== 'production') {
  91.         assert(targetRecord, `redirect failed: named route "${name}" not found.`)
  92.       }
  93.       return match({
  94.         _normalized: true,
  95.         name,
  96.         query,
  97.         hash,
  98.         params
  99.       }, undefined, location)
  100.     } else if (path) {
  101.       // 1. resolve relative redirect
  102.       const rawPath = resolveRecordPath(path, record)
  103.       // 2. resolve params
  104.       const resolvedPath = fillParams(rawPath, params, `redirect route with path "${rawPath}"`)
  105.       // 3. rematch with existing query and hash
  106.       return match({
  107.         _normalized: true,
  108.         path: resolvedPath,
  109.         query,
  110.         hash
  111.       }, undefined, location)
  112.     } else {
  113.       if (process.env.NODE_ENV !== 'production') {
  114.         warn(false, `invalid redirect option: ${JSON.stringify(redirect)}`)
  115.       }
  116.       return _createRoute(null, location)
  117.     }
  118.   }
  120.   function alias ( // 处理别名
  121.     record: RouteRecord,
  122.     location: Location,
  123.     matchAs: string
  124.   ): Route {
  125.     const aliasedPath = fillParams(matchAs, location.params, `aliased route with path "${matchAs}"`)
  126.     const aliasedMatch = match({
  127.       _normalized: true,
  128.       path: aliasedPath
  129.     })
  130.     if (aliasedMatch) {
  131.       const matched = aliasedMatch.matched
  132.       const aliasedRecord = matched[matched.length - 1]
  133.       location.params = aliasedMatch.params
  134.       return _createRoute(aliasedRecord, location)
  135.     }
  136.     return _createRoute(null, location)
  137.   }
  139.   function _createRoute (  // 创建路由
  140.     record: ?RouteRecord,
  141.     location: Location,
  142.     redirectedFrom?: Location
  143.   ): Route {
  144.     if (record && record.redirect) {
  145.       return redirect(record, redirectedFrom || location)
  146.     }
  147.     if (record && record.matchAs) {
  148.       return alias(record, location, record.matchAs)
  149.     }
  150.     return createRoute(record, location, redirectedFrom, router) // 创建路由对象
  151.   }
  153.   return {
  154.     match,
  155.     addRoutes
  156.   }
  157. }
  159. // dev/src/create-route-map.js line 7
  160. export function createRouteMap (
  161.   routes: Array<RouteConfig>,
  162.   oldPathList?: Array<string>,
  163.   oldPathMap?: Dictionary<RouteRecord>,
  164.   oldNameMap?: Dictionary<RouteRecord>
  165. ): {
  166.   pathList: Array<string>,
  167.   pathMap: Dictionary<RouteRecord>,
  168.   nameMap: Dictionary<RouteRecord>
  169. } {
  170.   // the path list is used to control path matching priority
  171.   const pathList: Array<string> = oldPathList || [] // 创建映射表
  172.   // $flow-disable-line
  173.   const pathMap: Dictionary<RouteRecord> = oldPathMap || Object.create(null)
  174.   // $flow-disable-line
  175.   const nameMap: Dictionary<RouteRecord> = oldNameMap || Object.create(null)
  177.   routes.forEach(route => { // 遍历路由配置，为每个配置添加路由记录
  178.     addRouteRecord(pathList, pathMap, nameMap, route)
  179.   })
  181.   // ensure wildcard routes are always at the end
  182.   for (let i = 0, l = pathList.length; i < l; i++) { // 确保通配符在最后
  183.     if (pathList[i] === '*') {
  184.       pathList.push(pathList.splice(i, 1)[0])
  185.       l--
  186.       i--
  187.     }
  188.   }
  190.   if (process.env.NODE_ENV === 'development') {
  191.     // warn if routes do not include leading slashes
  192.     const found = pathList
  193.     // check for missing leading slash
  194.       .filter(path => path && path.charAt(0) !== '*' && path.charAt(0) !== '/')
  196.     if (found.length > 0) {
  197.       const pathNames = found.map(path => `- ${path}`).join('\n')
  198.       warn(false, `Non-nested routes must include a leading slash character. Fix the following routes: \n${pathNames}`)
  199.     }
  200.   }
  202.   return {
  203.     pathList,
  204.     pathMap,
  205.     nameMap
  206.   }
  207. }
  209. function addRouteRecord ( // 添加路由记录
  210.   pathList: Array<string>,
  211.   pathMap: Dictionary<RouteRecord>,
  212.   nameMap: Dictionary<RouteRecord>,
  213.   route: RouteConfig,
  214.   parent?: RouteRecord,
  215.   matchAs?: string
  216. ) {
  217.   const { path, name } = route // 获得路由配置下的属性
  218.   if (process.env.NODE_ENV !== 'production') {
  219.     assert(path != null, `"path" is required in a route configuration.`)
  220.     assert(
  221.       typeof route.component !== 'string',
  222.       `route config "component" for path: ${String(
  223.         path || name
  224.       )} cannot be a ` + `string id. Use an actual component instead.`
  225.     )
  226.   }
  228.   const pathToRegexpOptions: PathToRegexpOptions =
  229.     route.pathToRegexpOptions || {}
  230.   const normalizedPath = normalizePath(path, parent, pathToRegexpOptions.strict)
  232.   if (typeof route.caseSensitive === 'boolean') {
  233.     pathToRegexpOptions.sensitive = route.caseSensitive
  234.   }
  236.   const record: RouteRecord = { // 生成记录对象
  237.     path: normalizedPath,
  238.     regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),
  239.     components: route.components || { default: route.component },
  240.     instances: {},
  241.     name,
  242.     parent,
  243.     matchAs,
  244.     redirect: route.redirect,
  245.     beforeEnter: route.beforeEnter,
  246.     meta: route.meta || {},
  247.     props:
  248.       route.props == null
  249.         ? {}
  250.         : route.components
  251.           ? route.props
  252.           : { default: route.props }
  253.   }
  255.   if (route.children) {
  256.     // Warn if route is named, does not redirect and has a default child route.
  257.     // If users navigate to this route by name, the default child will
  258.     // not be rendered (GH Issue #629)
  259.     if (process.env.NODE_ENV !== 'production') {
  260.       if (
  261.         route.name &&
  262.         !route.redirect &&
  263.         route.children.some(child => /^\/?$/.test(child.path))
  264.       ) {
  265.         warn(
  266.           false,
  267.           `Named Route '${route.name}' has a default child route. ` +
  268.             `When navigating to this named route (:to="{name: '${
  269.               route.name
  270.             }'"), ` +
  271.             `the default child route will not be rendered. Remove the name from ` +
  272.             `this route and use the name of the default child route for named ` +
  273.             `links instead.`
  274.         )
  275.       }
  276.     }
  277.     route.children.forEach(child => { // 递归路由配置的 children 属性，添加路由记录
  278.       const childMatchAs = matchAs
  279.         ? cleanPath(`${matchAs}/${child.path}`)
  280.         : undefined
  281.       addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)
  282.     })
  283.   }
  285.   if (!pathMap[record.path]) { // 如果有多个相同的路径，只有第一个起作用，后面的会被忽略
  286.     pathList.push(record.path)
  287.     pathMap[record.path] = record
  288.   }
  290.   if (route.alias !== undefined) { // 如果路由有别名的话，给别名也添加路由记录
  291.     const aliases = Array.isArray(route.alias) ? route.alias : [route.alias]
  292.     for (let i = 0; i < aliases.length; ++i) {
  293.       const alias = aliases[i]
  294.       if (process.env.NODE_ENV !== 'production' && alias === path) {
  295.         warn(
  296.           false,
  297.           `Found an alias with the same value as the path: "${path}". You have to remove that alias. It will be ignored in development.`
  298.         )
  299.         // skip in dev to make it work
  300.         continue
  301.       }
  303.       const aliasRoute = {
  304.         path: alias,
  305.         children: route.children
  306.       }
  307.       addRouteRecord(
  308.         pathList,
  309.         pathMap,
  310.         nameMap,
  311.         aliasRoute,
  312.         parent,
  313.         record.path || '/' // matchAs
  314.       )
  315.     }
  316.   }
  318.   if (name) {
  319.     if (!nameMap[name]) {
  320.       nameMap[name] = record
  321.     } else if (process.env.NODE_ENV !== 'production' && !matchAs) {
  322.       warn(
  323.         false,
  324.         `Duplicate named routes definition: ` +
  325.           `{ name: "${name}", path: "${record.path}" }`
  326.       )
  327.     }
  328.   }
  329. }

在上文的构造函数中实例化的HTML5History对象就是对于history模式下的路由的处理，主要是通过继承History对象以及自身实现的方法完成路由。在初始化VueRouter时调用的init方法调用了路由切换以及调用了setupListeners方法实现了路由的切换的监听回调，注意此时并没有在HTML5History对象的构造函数中直接添加事件监听，这是因为需要避免在某些浏览器中调度第一个popstate事件，但是由于异步保护，第一个历史记录路由未同时更新的问题。history模式的代码结构以及更新视图的逻辑与hash模式基本类似，主要是监听popstate事件以及对于push()和replace()方法的变动，使用History对象的pushState()与replaceState()等方法进行路由的变换。

  1. // dev/src/index.js line 21
  2. export default class VueRouter {
  3.   //...
  4.   init (app: any /* Vue component instance */) {
  5.     process.env.NODE_ENV !== 'production' &&
  6.       assert(
  7.         install.installed,
  8.         `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
  9.           `before creating root instance.`
  10.       )
  12.     this.apps.push(app)
  14.     // set up app destroyed handler
  15.     // https://github.com/vuejs/vue-router/issues/2639
  16.     app.$once('hook:destroyed', () => {
  17.       // clean out app from this.apps array once destroyed
  18.       const index = this.apps.indexOf(app)
  19.       if (index > -1) this.apps.splice(index, 1)
  20.       // ensure we still have a main app or null if no apps
  21.       // we do not release the router so it can be reused
  22.       if (this.app === app) this.app = this.apps[0] || null
  24.       if (!this.app) this.history.teardown()
  25.     })
  27.     // main app previously initialized
  28.     // return as we don't need to set up new history listener
  29.     if (this.app) {
  30.       return
  31.     }
  33.     this.app = app
  35.     const history = this.history
  37.     if (history instanceof HTML5History || history instanceof HashHistory) {
  38.       const handleInitialScroll = routeOrError => {
  39.         const from = history.current
  40.         const expectScroll = this.options.scrollBehavior
  41.         const supportsScroll = supportsPushState && expectScroll
  43.         if (supportsScroll && 'fullPath' in routeOrError) {
  44.           handleScroll(this, routeOrError, from, false)
  45.         }
  46.       }
  47.       const setupListeners = routeOrError => {
  48.         history.setupListeners() // 初始化添加事件监听
  49.         handleInitialScroll(routeOrError)
  50.       }
  51.       history.transitionTo( // 如果默认页，需要根据当前浏览器地址栏里的 path 或者 hash 来激活对应的路由
  52.         history.getCurrentLocation(),
  53.         setupListeners,
  54.         setupListeners
  55.       )
  56.     }
  58.     history.listen(route => {
  59.       this.apps.forEach(app => {
  60.         app._route = route
  61.       })
  62.     })
  63.   }
  64.   //...
  65. }
  67. // dev/src/history/base.js line 24
  68. export class History {
  69.   // ...
  71.   transitionTo (
  72.     location: RawLocation,
  73.     onComplete?: Function,
  74.     onAbort?: Function
  75.   ) {
  76.     let route
  77.     // catch redirect option https://github.com/vuejs/vue-router/issues/3201
  78.     try {
  79.       route = this.router.match(location, this.current) // // 获取匹配的路由信息
  80.     } catch (e) {
  81.       this.errorCbs.forEach(cb => {
  82.         cb(e)
  83.       })
  84.       // Exception should still be thrown
  85.       throw e
  86.     }
  87.     const prev = this.current
  88.     this.confirmTransition( // 确认跳转
  89.       route,
  90.       () => {
  91.         this.updateRoute(route) // 更新当前 route 对象
  92.         onComplete && onComplete(route)
  93.         this.ensureURL() // 子类实现的更新url地址 对于 hash 模式的话 就是更新 hash 的值
  94.         this.router.afterHooks.forEach(hook => {
  95.           hook && hook(route, prev)
  96.         })
  98.         // fire ready cbs once
  99.         if (!this.ready) {
  100.           this.ready = true
  101.           this.readyCbs.forEach(cb => {
  102.             cb(route)
  103.           })
  104.         }
  105.       },
  106.       err => {
  107.         if (onAbort) {
  108.           onAbort(err)
  109.         }
  110.         if (err && !this.ready) {
  111.           // Initial redirection should not mark the history as ready yet
  112.           // because it's triggered by the redirection instead
  113.           // https://github.com/vuejs/vue-router/issues/3225
  114.           // https://github.com/vuejs/vue-router/issues/3331
  115.           if (!isNavigationFailure(err, NavigationFailureType.redirected) || prev !== START) {
  116.             this.ready = true
  117.             this.readyErrorCbs.forEach(cb => {
  118.               cb(err)
  119.             })
  120.           }
  121.         }
  122.       }
  123.     )
  124.   }
  126.   confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {
  127.     const current = this.current
  128.     this.pending = route
  129.     const abort = err => {
  130.       // changed after adding errors with
  131.       // https://github.com/vuejs/vue-router/pull/3047 before that change,
  132.       // redirect and aborted navigation would produce an err == null
  133.       if (!isNavigationFailure(err) && isError(err)) {
  134.         if (this.errorCbs.length) {
  135.           this.errorCbs.forEach(cb => {
  136.             cb(err)
  137.           })
  138.         } else {
  139.           warn(false, 'uncaught error during route navigation:')
  140.           console.error(err)
  141.         }
  142.       }
  143.       onAbort && onAbort(err)
  144.     }
  145.     const lastRouteIndex = route.matched.length - 1
  146.     const lastCurrentIndex = current.matched.length - 1
  147.     if (
  148.       isSameRoute(route, current) && // 如果是相同的路由就不跳转
  149.       // in the case the route map has been dynamically appended to
  150.       lastRouteIndex === lastCurrentIndex &&
  151.       route.matched[lastRouteIndex] === current.matched[lastCurrentIndex]
  152.     ) {
  153.       this.ensureURL()
  154.       return abort(createNavigationDuplicatedError(current, route))
  155.     }
  157.     const { updated, deactivated, activated } = resolveQueue( // 通过对比路由解析出可复用的组件，需要渲染的组件，失活的组件
  158.       this.current.matched,
  159.       route.matched
  160.     )
  162.     const queue: Array<?NavigationGuard> = [].concat( // 导航守卫数组
  163.       // in-component leave guards
  164.       extractLeaveGuards(deactivated),  // 失活的组件钩子
  165.       // global before hooks
  166.       this.router.beforeHooks, // 全局 beforeEach 钩子
  167.       // in-component update hooks
  168.       extractUpdateHooks(updated), // 在当前路由改变，但是该组件被复用时调用
  169.       // in-config enter guards
  170.       activated.map(m => m.beforeEnter), // 需要渲染组件 enter 守卫钩子
  171.       // async components
  172.       resolveAsyncComponents(activated) // 解析异步路由组件
  173.     )
  175.     const iterator = (hook: NavigationGuard, next) => {
  176.       if (this.pending !== route) { // 路由不相等就不跳转路由
  177.         return abort(createNavigationCancelledError(current, route))
  178.       }
  179.       try {
  180.         hook(route, current, (to: any) => { // 只有执行了钩子函数中的next，才会继续执行下一个钩子函数，否则会暂停跳转，以下逻辑是在判断 next() 中的传参
  181.           if (to === false) {
  182.             // next(false) -> abort navigation, ensure current URL
  183.             this.ensureURL(true)
  184.             abort(createNavigationAbortedError(current, route))
  185.           } else if (isError(to)) {
  186.             this.ensureURL(true)
  187.             abort(to)
  188.           } else if (
  189.             typeof to === 'string' ||
  190.             (typeof to === 'object' &&
  191.               (typeof to.path === 'string' || typeof to.name === 'string'))
  192.           ) {
  193.             // next('/') or next({ path: '/' }) -> redirect
  194.             abort(createNavigationRedirectedError(current, route))
  195.             if (typeof to === 'object' && to.replace) {
  196.               this.replace(to)
  197.             } else {
  198.               this.push(to)
  199.             }
  200.           } else {
  201.             // confirm transition and pass on the value
  202.             next(to)
  203.           }
  204.         })
  205.       } catch (e) {
  206.         abort(e)
  207.       }
  208.     }
  209.     // ...
  210.   }
  211.   // ...
  212. }
  214. // dev/src/history/html5.js line 10
  215. export class HTML5History extends History {
  216.   _startLocation: string
  218.   constructor (router: Router, base: ?string) {
  219.     super(router, base)
  221.     this._startLocation = getLocation(this.base)
  222.   }
  224.   setupListeners () { // 初始化
  225.     if (this.listeners.length > 0) {
  226.       return
  227.     }
  229.     const router = this.router
  230.     const expectScroll = router.options.scrollBehavior
  231.     const supportsScroll = supportsPushState && expectScroll
  233.     if (supportsScroll) {
  234.       this.listeners.push(setupScroll())
  235.     }
  237.     const handleRoutingEvent = () => {
  238.       const current = this.current
  240.       // Avoiding first `popstate` event dispatched in some browsers but first
  241.       // history route not updated since async guard at the same time.
  242.       const location = getLocation(this.base)
  243.       if (this.current === START && location === this._startLocation) {
  244.         return
  245.       }
  247.       this.transitionTo(location, route => {
  248.         if (supportsScroll) {
  249.           handleScroll(router, route, current, true)
  250.         }
  251.       })
  252.     }
  253.     window.addEventListener('popstate', handleRoutingEvent) // 事件监听
  254.     this.listeners.push(() => {
  255.       window.removeEventListener('popstate', handleRoutingEvent)
  256.     })
  257.   }
  259.   go (n: number) {
  260.     window.history.go(n)
  261.   }
  263.   push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  264.     const { current: fromRoute } = this
  265.     this.transitionTo(location, route => {
  266.       pushState(cleanPath(this.base + route.fullPath))
  267.       handleScroll(this.router, route, fromRoute, false)
  268.       onComplete && onComplete(route)
  269.     }, onAbort)
  270.   }
  272.   replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  273.     const { current: fromRoute } = this
  274.     this.transitionTo(location, route => {
  275.       replaceState(cleanPath(this.base + route.fullPath))
  276.       handleScroll(this.router, route, fromRoute, false)
  277.       onComplete && onComplete(route)
  278.     }, onAbort)
  279.   }
  281.   ensureURL (push?: boolean) {
  282.     if (getLocation(this.base) !== this.current.fullPath) {
  283.       const current = cleanPath(this.base + this.current.fullPath)
  284.       push ? pushState(current) : replaceState(current)
  285.     }
  286.   }
  288.   getCurrentLocation (): string {
  289.     return getLocation(this.base)
  290.   }
  291. }

每日一题

  1. https://github.com/WindrunnerMax/EveryDay

参考

  1. https://www.jianshu.com/p/557f2ba86892
  2. https://juejin.im/post/6844904159678824456
  3. https://juejin.im/post/6844904012630720526
  4. https://juejin.im/post/6844904062698127367
  5. https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
  6. https://liyucang-git.github.io/2019/08/15/vue-router%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/
  7. https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

Vue路由History模式分析的更多相关文章

  1. Vue路由Hash模式分析

    Vue路由Hash模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,即使用URL的Hash来模拟一个完整的URL,当URL改变时页面 ...

  2. K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

    背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...

  3. Vue路由history模式踩坑记录：nginx配置解决404问题

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...

  4. vue路由history模式刷新页面出现404问题

    vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...

  5. 新来的前端小姐姐问：Vue路由history模式刷新页面出现404问题

    摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...

  6. 解决vue路由history模式刷新后404的问题

    server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...

  7. VUE路由history模式坑记--NGINX

    因微信分享和自动登录需要,对于URL中存在'#'的地址,处理起来比较坑(需要手动写一些代码来处理).还有可能会有一些隐藏的问题没被发现. 如果VUE能像其他(JSP/PHP)系统的路径一样,就不存在这 ...

  8. vue路由history模式下打包node服务器配置

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  9. vue路由history模式,nginx配置

    nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...

随机推荐

  1. Linux常用命令--不断更新

    Linux命令: !. 1.[root@loc8lhost/root]# 表示登陆进去系统,其中#是超级⽤用户也即root⽤用 户的系统提示符 #. 2.reboot命令可以重启系统 $. 3.关闭系 ...

  2. js map对象处理if

    onButtonClick只有一个参数时候,map和object对象都可以 // onButtonClick1(3) onButtonClick只有一个参数时候,map和object对象都可以 con ...

  3. C016：字符串倒置

    代码: #include "stdafx.h" #include <string.h> int _tmain(int argc, _TCHAR* argv[]) { c ...

  4. 详解 LeetCode_007_整数反转(Java 实现)

    目录 LeetCode_007_整数反转 题目描述 总体分析 解决方案 小结 LeetCode_007_整数反转 题目描述 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示 ...

  5. asp.net中 使用Nginx 配置 IIS站点负载均衡

    这是一偏初学者入门的内容,发现有问题的地方,欢迎留言,一起学习,一起进步 本文主要记录一下在Windows平台中,IIS站点如何使用Nginx 做一个简单的负载均衡  一. 准备工作: 官网下载安装包 ...

  6. python基础一（安装、变量、循环、git)

    一.开发语言分类 系统的开发语言有java.c++.c#.python.ruby.php等等,开发语言可分为编译型语言和解释型语言. 编译型语言就是写好代码之后就把代码编译成二进制文件,运行的时候运行 ...

  7. Vue render函数 函数时组件 jsx

    常规组件使用 定义组件 components/list/list.vue <template> <ul> <li v-for="(item, index) in ...

  8. 一、Git是什么?

    Git是什么? Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控 ...

  9. 关于JAVA的一些零碎小知识

    1.经常遇到集合之间需要互相转化的 Array和List转化:Arrays.asList(数组):list.toArray(); List和Set转化:Set<String> set = ...

  10. Spring系列 之数据源的配置 数据库 数据源 连接池的区别

    Spring系列之数据源的配置 数据源,连接池,数据库三者的区别 连接池:这个应该都学习过,比如c3p0,druid等等,连接池的作用是为了提高程序的效率,因为频繁的去创建,关闭数据库连接,会对性能有 ...