两万字详解，带你入门Vue-router，理解源码⛱️

墨蓝 2023-07-07 12:34 6阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

### 1. 什么是前端路由 ###

路由是根据不同的 url 地址展示不同的内容或页面。前端路由就是把不同路由对应的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。

### 2. 什么时候使用前端路由 ###

在单页面应用，大部分页面结构不变，只改变部分内容的使用

### 3. 前端路由有什么优点和缺点 ###

##### 优点 #####

*  用户体验好，不需要每次都从服务器全部获取，快速展示给用户

##### 缺点 #####

*  不利于 `SEO`
 *  使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
 *  单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

### 4. `vue-router` 构建SPA ###

`<router-link></router-link>`或者`this.$router.push({path:""})`,

*  mode: ‘history’ （**`默认 hash 模式`**，配置路由 history 模式作为有服务端渲染的应用，不希望有 \#，\# 更多是用来做定位的，同时它不会被搜索引擎解析，导致网站 SEO 效果不好。）
 *  base: ‘/base/’ （**`两边斜杠要加`**，设置之后，使用 vue-router api 进行跳转 都会加上这个 base 路径）
 *  linkActiveClass（部分匹配时，添加这个 class） 和 linkExactActiveClass（精准匹配路由时，会加上这个 class）
 *  scrollBehavior（页面跳转后，页面是否滚动。）
 *  parseQuery 和 stringifyQuery
 *  fallback（不是所有浏览器都支持前端路由的方式，如果不支持，设置 fallback: true，vue 会自动 fallback 到 hash 模式。）
 *  meta（和 HTML 中 header 部分的 meta 页面原信息类似，例如 description 有助于 seo 等，一般和路由没什么关系的配置可以写在这。）

使用脚手架搭建的项目中，选择了 vue-router，那么基本都会帮你配置好，无需担心。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

### 5. 动态路由匹配 ###

路由中可以携带多个参数

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './views/Home.vue'
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        // 这是你的路由，路由中的参数名称，就是将来页面当中获取该参数的形参
        { 
          path: '/home/:id/:name',
          name: 'home',
          component: Home
        }
      ]
    })

<template>
      <div>
        <h1>报告长官，这是我的 ID：{
       { $route.params.id }}</h1>
        <h1>{
       { $route.params.name }} 前来报道</h1>
      </div>
    </template>

假设你的路由长这个样子：`http://localhost:8080/#/home/12138/兔子警官`

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]

### 6. 嵌套路由 ###

新建两个页面

<template>
      <h1>
        现在是兔子警官的上班时间
      </h1>
    </template>

<template>
      <h1>
        现在是兔子警官的休息时间
      </h1>
    </template>

编写路由

export default new Router({ 
      routes: [
        { 
          path: '/home',
          name: 'home',
          component: Home,
          children: [
            { 
              path: 'work',
              name: 'work',
              component: () => import('./views/work.vue')
            },
            { 
              path: 'relaxation',
              name: 'relaxation',
              component: () => import('./views/relaxation.vue')
            }
          ]
        }
      ]
    })

点击链接，进行页面切换

<template>
      <div>
        <h1>报告长官，这是我的 ID：12138</h1>
        <h1>兔子警官 前来报道</h1>
        <router-link to="/home/work">现在要去工作了</router-link>
        <br/>
        <router-link to="/home/relaxation">现在要去休息喝茶了</router-link>
        <div>
          <router-view></router-view>
        </div>
      </div>
    </template>

### 7. 编程式路由，通过 `JS` 来页面的跳转 ###

*  `$router.push("name")`
 *  `$router.push({path: "name"})`
 *  `$router.push({path: "name"?a=123})` 或者 `$router.push({path: "name", query:{a: 123}})`
 *  `$router.go(1)`

<template>
      <div>
        <h1>报告长官，这是我的 ID：12138</h1>
        <h1>兔子警官 前来报道</h1>
        <router-link to="/home/work">现在要去工作了</router-link>
        <br />
        <button @click="goTo">现在要去休息喝茶了</button>
        <div>
          <router-view></router-view>
        </div>
      </div>
    </template>
    
    <script>
    export default { 
      methods: { 
        goTo() { 
          this.$router.push('/relaxation')
          this.$router.push({ 
            path: '/relaxation'
          })
          this.$router.push({ 
            path: "/relaxation?id=123",
          });
        },
      },
    };
    </script>
    
    <style lang="" scoped>
    </style>

### 8. 命名路由和命名视图 ###

*  命名路由

<router-link :to="{name: 'Car', params: {cardId: 123}}">跳转到购物车页面</router-link>

里面的 name 的值要与 router 里面的 name 相对应

*  命名视图

<router-view name="title"></router-view>
    <router-view name="img"></router-view>

router文件中

{ 
      path: '/',
      name: 'GoodList',
      components: { 
        default: GoodList,
        title: Title,
        img: Image
      }
    }

name 的值要与 router 文件里面的名字相对应，不然vue会不知道该渲染什么。

### 路由守卫 ###

#### `vue` 路由独享守卫 `beforeEnter` ####

![在这里插入图片描述][177f3cf5a21049488691431f0d150cc1.gif_pic_center]

`router.js`

{ 
      path: '/relaxation',
      name: 'relaxation',
      component: () => import('./views/relaxation.vue'),
      beforeEnter(to, from, next) { 
        if (to.path === '/relaxation') { 
          alert('现在还没到休息时间')
          next(false)
        } else { 
          next()
        }
      }
    }

路由守卫不仅可以在 router.js 中触发，还可以组件内部触发

beforeRouteEnter (to, from, next) { 
      console.log('现在是工作时间', this)
      next(vm => { 
        console.log(vm)
      })
    },
    // 在当前路由改变，但是该组件被复用时调用，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    beforeRouteUpdate(to, from, next) { 
      console.log('路由渲染改变')
    },
    beforeRouteLeave (to, from, next) { 
      console.log('工作时间结束了')
      next()
    }

## 完整的导航解析流程 ##

1.  导航被触发。
2.  在失活的组件里调用 `beforeRouteLeave` 守卫。
3.  调用全局的 `beforeEach` 守卫。
4.  在重用的组件里调用 `beforeRouteUpdate` 守卫
5.  在路由配置里调用 `beforeEnter`。
6.  解析异步路由组件。
7.  在被激活的组件里调用 `beforeRouteEnter`。
8.  调用全局的 `beforeResolve` 守卫。
9.  导航被确认。
10. 调用全局的 `afterEach` 钩子。
11. 触发 DOM 更新。
12. 调用 `beforeRouteEnter` 守卫中传给 `next` 的回调函数，创建好的组件实例会作为回调函数的参数传入。

现在我们来实践一下

兔子警官工作时间结束，需要去休息啦啦啦啦

![在这里插入图片描述][3ab9f09cfd044eec9534067e2d29ec15.gif_pic_center]

`router.js`

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './views/Home.vue'
    
    Vue.use(Router)
    
    const router = new Router({ 
      routes: [
        { 
          path: '/relaxation',
          name: 'relaxation',
          component: () => import('./views/relaxation.vue'),
          beforeEnter(to, from, next) { 
            console.log('路由配置：休息时间到了')
            next()
          }
        }
      ]
    })
    
    router.beforeEach((to, from, next) => { 
      console.log('调用全局的 beforeEach 守卫')
      next()
    })
    
    router.beforeResolve((to, from, next) => { 
      console.log('调用全局的 beforeResolve 守卫')
      next()
    })
    
    router.afterEach((to, from, next) => { 
      console.log('调用全局的 afterEach 钩子')
    })
    
    
    export default router

<template>
      <h1>
        现在是兔子警官的上班时间
        <router-link to="/home">离开</router-link>
        <h3>
          <router-link to="/relaxation">现在兔子警官要休息啦</router-link>
        </h3>
      </h1>
    </template>
    
    <script>
    export default { 
      beforeRouteEnter (to, from, next) { 
        console.log('现在是工作时间', this)
        next(vm => { 
          console.log(vm)
        })
      },
      beforeRouteUpdate(to, from, next) { 
        console.log('路由渲染改变')
      },
      beforeRouteLeave (to, from, next) { 
        console.log('beforeRouteLeave---work：工作时间结束了')
        next()
      }
    };
    </script>

<template>
      <h1>现在是兔子警官的休息时间</h1>
    </template>
    
    <script>
    export default { 
      beforeRouteEnter(to, from, next) { 
        console.log("被激活的组件里调用 beforeRouteEnter：开始休息时间");
        next((vm) => { 
          console.log(vm);
        });
      },
      beforeRouteUpdate(to, from, next) { 
        console.log("路由渲染改变");
      },
      beforeRouteLeave(to, from, next) { 
        console.log("休息时间到了");
        next();
      },
    };
    </script>

### vue-router源码分析 ###

> 实例化一个 VueRouter 的实例对象 ，然后将其传入 Vue 实例的 options 中。创建 matcher 匹配函数，根据 mode 实例化具体的 History，默认为’hash’模式。通过 supportsPushState 判断浏览器是否支持’history’模式。如果设置的是’history’但是如果浏览器不支持的话，'history’模式会退回到’hash’模式。根据不同模式选择实例化对应的 History 类，根据history的类别执行相应的初始化操作和监听。在 hash 模式下，监听 window 上的 hashchange 事件，每一次改变hash(window.location.hash)，都会在浏览器访问历史中增加一个记录。history 模式下，History interface是浏览器历史记录栈提供的接口，通过back(),forward(),go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。

在入口文件中需要实例化一个 VueRouter 的实例对象 ，然后将其传入 Vue 实例的 options 中。

export default class VueRouter { 
      static install: () => void;
      static version: string;
    
      app: any;
      apps: Array<any>;
      ready: boolean;
      readyCbs: Array<Function>;
      options: RouterOptions;
      mode: string;
      history: HashHistory | HTML5History | AbstractHistory;
      matcher: Matcher;
      fallback: boolean;
      beforeHooks: Array<?NavigationGuard>;
      resolveHooks: Array<?NavigationGuard>;
      afterHooks: Array<?AfterNavigationHook>;
    
      constructor (options: RouterOptions = { }) { 
        this.app = null
        this.apps = []
        this.options = options
        this.beforeHooks = []
        this.resolveHooks = []
        this.afterHooks = []
        // 创建 matcher 匹配函数
        this.matcher = createMatcher(options.routes || [], this)
        // 根据 mode 实例化具体的 History，默认为'hash'模式
        let mode = options.mode || 'hash'
        // 通过 supportsPushState 判断浏览器是否支持'history'模式
        // 如果设置的是'history'但是如果浏览器不支持的话，'history'模式会退回到'hash'模式
        // fallback 是当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
        this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
        if (this.fallback) { 
          mode = 'hash'
        }
        // 不在浏览器内部的话，就会变成'abstract'模式
        if (!inBrowser) { 
          mode = 'abstract'
        }
        this.mode = mode
         // 根据不同模式选择实例化对应的 History 类
        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}`)
            }
        }
      }
    
      match (
        raw: RawLocation,
        current?: Route,
        redirectedFrom?: Location
      ): Route { 
        return this.matcher.match(raw, current, redirectedFrom)
      }
    
      get currentRoute (): ?Route { 
        return this.history && this.history.current
      }
    
      init (app: any /* Vue component instance */) { 
        process.env.NODE_ENV !== 'production' && assert(
          install.installed,
          `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
          `before creating root instance.`
        )
    
        this.apps.push(app)
    
        // main app already initialized.
        if (this.app) { 
          return
        }
    
        this.app = app
    
        const history = this.history
        // 根据history的类别执行相应的初始化操作和监听
        if (history instanceof HTML5History) { 
          history.transitionTo(history.getCurrentLocation())
        } else if (history instanceof HashHistory) { 
          const setupHashListener = () => { 
            history.setupListeners()
          }
          history.transitionTo(
            history.getCurrentLocation(),
            setupHashListener,
            setupHashListener
          )
        }
    
        history.listen(route => { 
          this.apps.forEach((app) => { 
            app._route = route
          })
        })
      }
      // 路由跳转之前
      beforeEach (fn: Function): Function { 
        return registerHook(this.beforeHooks, fn)
      }
      // 路由导航被确认之间前
      beforeResolve (fn: Function): Function { 
        return registerHook(this.resolveHooks, fn)
      }
      // 路由跳转之后
      afterEach (fn: Function): Function { 
        return registerHook(this.afterHooks, fn)
      }
      // 第一次路由跳转完成时被调用的回调函数
      onReady (cb: Function, errorCb?: Function) { 
        this.history.onReady(cb, errorCb)
      }
      // 路由报错
      onError (errorCb: Function) { 
        this.history.onError(errorCb)
      }
      // 路由添加，这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
      push (location: RawLocation, onComplete?: Function, onAbort?: Function) { 
        this.history.push(location, onComplete, onAbort)
      }
      // 这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
      replace (location: RawLocation, onComplete?: Function, onAbort?: Function) { 
        this.history.replace(location, onComplete, onAbort)
      }
      // 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
      go (n: number) { 
        this.history.go(n)
      }
      // 后退到上一个页面
      back () { 
        this.go(-1)
      }
      // 前进到下一个页面
      forward () { 
        this.go(1)
      }
    
      getMatchedComponents (to?: RawLocation | Route): Array<any> { 
        const route: any = to
          ? to.matched
            ? to
            : this.resolve(to).route
          : this.currentRoute
        if (!route) { 
          return []
        }
        return [].concat.apply([], route.matched.map(m => { 
          return Object.keys(m.components).map(key => { 
            return m.components[key]
          })
        }))
      }
    
      resolve (
        to: RawLocation,
        current?: Route,
        append?: boolean
      ): { 
        location: Location,
        route: Route,
        href: string,
        // for backwards compat
        normalizedTo: Location,
        resolved: Route
      } { 
        const location = normalizeLocation(
          to,
          current || this.history.current,
          append,
          this
        )
        const route = this.match(location, current)
        const fullPath = route.redirectedFrom || route.fullPath
        const base = this.history.base
        const href = createHref(base, fullPath, this.mode)
        return { 
          location,
          route,
          href,
          // for backwards compat
          normalizedTo: location,
          resolved: route
        }
      }
    
      addRoutes (routes: Array<RouteConfig>) { 
        this.matcher.addRoutes(routes)
        if (this.history.current !== START) { 
          this.history.transitionTo(this.history.getCurrentLocation())
        }
      }
    }

#### HashHistory ####

• hash虽然出现在url中，但不会被包括在http请求中，它是用来指导浏览器动作的，对服务器端没影响，因此，改变hash不会重新加载页面。  
• 可以为hash的改变添加监听事件：

window.addEventListener("hashchange",funcRef,false)

• 每一次改变hash(window.location.hash)，都会在浏览器访问历史中增加一个记录。

export class HashHistory extends History { 
      constructor (router: Router, base: ?string, fallback: boolean) { 
        super(router, base)
        // check history fallback deeplinking
        // 如果是从history模式降级来的，需要做降级检查
        if (fallback && checkFallback(this.base)) { 
        // 如果降级且做了降级处理，则返回
          return
        }
        ensureSlash()
      }
      .....

function checkFallback (base) { 
      const location = getLocation(base)
      // 得到除去base的真正的 location 值
      if (!/^\/#/.test(location)) { 
      // 如果此时地址不是以 /# 开头的
      // 需要做一次降级处理，降为 hash 模式下应有的 /# 开头
        window.location.replace(
          cleanPath(base + '/#' + location)
        )
        return true
      }
    }
    
    function ensureSlash (): boolean { 
    // 得到 hash 值
      const path = getHash()
      if (path.charAt(0) === '/') { 
       // 如果是以 / 开头的，直接返回即可
        return true
      }
      // 不是的话，需要手动保证一次 替换 hash 值
      replaceHash('/' + path)
      return false
    }
    
    export function getHash (): string { 
      // We can't use window.location.hash here because it's not
      // consistent across browsers - Firefox will pre-decode it!
      // 因为兼容性的问题，这里没有直接使用 window.location.hash
      // 因为 Firefox decode hash 值
      const href = window.location.href
      const index = href.indexOf('#')
      return index === -1 ? '' : decodeURI(href.slice(index + 1))
    }
    // 得到hash之前的url地址
    function getUrl (path) { 
      const href = window.location.href
      const i = href.indexOf('#')
      const base = i >= 0 ? href.slice(0, i) : href
      return `${ base}#${ path}`
    }
    // 添加一个hash
    function pushHash (path) { 
      if (supportsPushState) { 
        pushState(getUrl(path))
      } else { 
        window.location.hash = path
      }
    }
    // 替代hash
    function replaceHash (path) { 
      if (supportsPushState) { 
        replaceState(getUrl(path))
      } else { 
        window.location.replace(getUrl(path))
      }
    }

hash的改变会自动添加到浏览器的访问历史记录中。 那么视图的更新是怎么实现的呢，看下 transitionTo()方法：

transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) { 
        const route = this.router.match(location, this.current) //找到匹配路由
        this.confirmTransition(route, () => {  //确认是否转化
          this.updateRoute(route) //更新route
          onComplete && onComplete(route)
          this.ensureURL()
    
          // fire ready cbs once
          if (!this.ready) { 
            this.ready = true
            this.readyCbs.forEach(cb => {  cb(route) })
          }
        }, err => { 
          if (onAbort) { 
            onAbort(err)
          }
          if (err && !this.ready) { 
            this.ready = true
            this.readyErrorCbs.forEach(cb => {  cb(err) })
          }
        })
      }
      
    //更新路由
    updateRoute (route: Route) { 
        const prev = this.current // 跳转前路由
        this.current = route // 装备跳转路由
        this.cb && this.cb(route) // 回调函数，这一步很重要，这个回调函数在index文件中注册，会更新被劫持的数据 _router
        this.router.afterHooks.forEach(hook => { 
          hook && hook(route, prev)
        })
      }
    }

#### pushState ####

export function pushState (url?: string, replace?: boolean) { 
      saveScrollPosition()
      // try...catch the pushState call to get around Safari
      // DOM Exception 18 where it limits to 100 pushState calls
      // 加了 try...catch 是因为 Safari 有调用 pushState 100 次限制
      // 一旦达到就会抛出 DOM Exception 18 错误
      const history = window.history
      try { 
        if (replace) { 
        // replace 的话 key 还是当前的 key 没必要生成新的
          history.replaceState({  key: _key }, '', url)
        } else { 
        // 重新生成 key
          _key = genKey()
           // 带入新的 key 值
          history.pushState({  key: _key }, '', url)
        }
      } catch (e) { 
      // 达到限制了 则重新指定新的地址
        window.location[replace ? 'replace' : 'assign'](url)
      }
    }

#### replaceState ####

// 直接调用 pushState 传入 replace 为 true
    export function replaceState (url?: string) { 
      pushState(url, true)
    }

pushState和replaceState两种方法的共同特点：当调用他们修改浏览器历史栈后，虽然当前url改变了，但浏览器不会立即发送请求该url，这就为单页应用前端路由，更新视图但不重新请求页面提供了基础。

#### supportsPushState ####

export const supportsPushState = inBrowser && (function () { 
      const ua = window.navigator.userAgent
    
      if (
        (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
        ua.indexOf('Mobile Safari') !== -1 &&
        ua.indexOf('Chrome') === -1 &&
        ua.indexOf('Windows Phone') === -1
      ) { 
        return false
      }
    
      return window.history && 'pushState' in window.history
    })()

其实所谓响应式属性，即当\_route值改变时，会自动调用Vue实例的render()方法，更新视图。

$router.push()-->HashHistory.push()-->History.transitionTo()-->History.updateRoute()-->{ app._route=route}-->vm.render()

#### 监听地址栏 ####

在浏览器中，用户可以直接在浏览器地址栏中输入改变路由，因此还需要监听浏览器地址栏中路由的变化 ，并具有与通过代码调用相同的响应行为，在HashHistory中这一功能通过setupListeners监听hashchange实现：

setupListeners () { 
        window.addEventListener('hashchange', () => { 
            if (!ensureSlash()) { 
                return
            }
            this.transitionTo(getHash(), route => { 
                replaceHash(route.fullPath)
            })
        })
    }

#### HTML5History ####

History interface是浏览器历史记录栈提供的接口，通过back(),forward(),go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。

export class HTML5History extends History { 
      constructor (router: Router, base: ?string) { 
        super(router, base)
    
        const expectScroll = router.options.scrollBehavior //指回滚方式
        const supportsScroll = supportsPushState && expectScroll
    
        if (supportsScroll) { 
          setupScroll()
        }
    
        const initLocation = getLocation(this.base)
        //监控popstate事件
        window.addEventListener('popstate', e => { 
          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.
          // 避免在某些浏览器中首次发出“popstate”事件
          // 由于同一时间异步监听，history路由没有同时更新。
          const location = getLocation(this.base)
          if (this.current === START && location === initLocation) { 
            return
          }
    
          this.transitionTo(location, route => { 
            if (supportsScroll) { 
              handleScroll(router, route, current, true)
            }
          })
        })
      }

hash模式仅改变hash部分的内容，而hash部分是不会包含在http请求中的(hash带\#)：  
oursite.com/\#/user/id //如请求，只会发送http://oursite.com/  
所以hash模式下遇到根据url请求页面不会有问题  
而history模式则将url修改的就和正常请求后端的url一样(history不带\#)  
oursite.com/user/id

如果这种向后端发送请求的话，后端没有配置对应/user/id的get路由处理,会返回404错误。  
官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。

#### 两种模式比较 ####

一般的需求场景中，hash模式与history模式是差不多的，根据MDN的介绍，调用history.pushState()相比于直接修改hash主要有以下优势：  
• pushState设置的新url可以是与当前url同源的任意url,而hash只可修改\#后面的部分，故只可设置与当前同文档的url  
• pushState设置的新url可以与当前url一模一样，这样也会把记录添加到栈中，而hash设置的新值必须与原来不一样才会触发记录添加到栈中  
• pushState通过stateObject可以添加任意类型的数据记录中，而hash只可添加短字符串  
pushState可额外设置title属性供后续使用

#### AbstractHistory ####

'abstract’模式，不涉及和浏览器地址的相关记录，流程跟’HashHistory’是一样的，其原理是通过数组模拟浏览器历史记录栈的功能  
//abstract.js实现，这里通过栈的数据结构来模拟路由路径

export class AbstractHistory extends History { 
      index: number;
      stack: Array<Route>;
    
      constructor (router: Router, base: ?string) { 
        super(router, base)
        this.stack = []
        this.index = -1
      }
      
      // 对于 go 的模拟
      go (n: number) { 
        // 新的历史记录位置
        const targetIndex = this.index + n
        // 小于或大于超出则返回
        if (targetIndex < 0 || targetIndex >= this.stack.length) { 
          return
        }
        // 取得新的 route 对象
        // 因为是和浏览器无关的 这里得到的一定是已经访问过的
        const route = this.stack[targetIndex]
        // 所以这里直接调用 confirmTransition 了
        // 而不是调用 transitionTo 还要走一遍 match 逻辑
        this.confirmTransition(route, () => { 
          this.index = targetIndex
          this.updateRoute(route)
        })
      }

//确认是否转化路由
      confirmTransition (route: Route, onComplete: Function, onAbort?: Function) { 
        const current = this.current
        const abort = err => { 
          if (isError(err)) { 
            if (this.errorCbs.length) { 
              this.errorCbs.forEach(cb => {  cb(err) })
            } else { 
              warn(false, 'uncaught error during route navigation:')
              console.error(err)
            }
          }
          onAbort && onAbort(err)
        }
        //判断如果前后是同一个路由，不进行操作
        if (
          isSameRoute(route, current) &&
          route.matched.length === current.matched.length
        ) { 
          this.ensureURL()
          return abort()
        }
        //下面是各类钩子函数的处理
        //*********************
        })
      }

### 实现一个简单的 Vue-router ###

平常使用 `vue-router` 编写路由

import Vue from 'vue'
    import Home from '../views/Home.vue'
    import KRouter from '../krouter'
    Vue.use(KRouter)
    
    export default new KRouter({ 
      routes: [
        { 
          path: '/',
          component: Home,
          beforeEnter: (from, to, next) => { 
            console.log(`beforeEnter from ${ from} to ${ to}`)
            setTimeout(() => { 
              next()
            }, 2000)
          }
        },
        { 
          path: '/about',
          component: () => import('../views/About.vue')
        }
      ]
    })

在 `krouter` 中编写属于自己的 `router`

--------------------

先创建一个 `KRouter`：

class KRouter { 
      // options: Router 实例化之后，传入的参数配置
      constructor (Vue, options) { 
        // 挂载，以后可以到处使用
        this.$options = options;
        // 路由表
        this.routeMap = { }
        // 使用 Vue 的响应式机制，路由切换的时候，做一些响应
        this.app = new Vue({ 
      		data: { 
        		// 默认根目录
       			current: '/'
      		}
    	})
      }
    }

创建静态方法 install()

// Vue.use() 向外暴露 install 方法，使得可以使用插件注册
    static install(_Vue) { 
      Vue = _Vue
      // 对 Vue 做扩展
      Vue.mixin({ 
        beforeCreate() { 
          // console.log(this.$options)
          if (this.$options.router) {           
            // this.$router.push
            Vue.prototype.$krouter = this.$options.router
            // 入口配置
            // 启动路由
            this.$options.router.init()
          }
        }
      })
    }

// this.$router.push
    push(url) { 
      // hash 模式直接赋值
      window.location.hash = url
      // history 模式使用 pushState 方法
    }

初始化完成

*  监听 `hashChange` 事件
 *  处理路由表
 *  初始化组件 `router-view` 和 `router-link`
 *  生命周期，路由守卫

这四件事，就完成了一个 mini 版的 `Vue-router`

init() { 
      // 使用插件 use 启动整个路由
      // 1. 监听 hashChange 事件
      this.bindEvents()
      // 2. 处理路由表
      this.createRouteMap()
      // console.log(this.routeMap)
      // 3. 初始化组件 router-view 和 router-link
      this.initComponent()
      // 4. 生命周期，路由守卫
    }

#### 1. 监听 `hashChange` 事件 ####

// 监听 hashChange 事件
    bindEvents() { 
      window.addEventListener('hashchange', this.onHashChange.bind(this), false)
      // 不仅要在路由改变的时候监听事件，在初始化的时候也要监听
      window.addEventListener('load', this.onHashChange.bind(this), false)
    }

onHashChange(e) { 
      // 获取当前的哈希值
      let hash = this.getHash()
      let router = this.routeMap[hash]
      this.app.current = hash
    }

#### 2. 处理路由表 ####

// 处理路由表
    createRouteMap() { 
      this.$options.routes.forEach(item => { 
        this.routeMap[item.path] = item
      })
    }

#### 3. 初始化组件 router-view 和 router-link ####

initComponent() { 
      // router-view
      Vue.component('router-view', { 
        render: h => { 
          const component = this.routeMap[this.app.current].component
          // 使用 h 新建一个虚拟 DOM
          return h(component)
        },
      })
      Vue.component('router-link', { 
        props: { 
          to: String
        },
        render(h) { 
          // h 有三个参数：组件名，参数，子元素
          return h('a', { 
            attrs: { 
              href: '#' + this.to
            }
          },
          [this.$slots.default]
          )
        }
      })
    }

#### 4. 路由守卫 ####

onHashChange(e) { 
      // 获取当前的哈希值
      let hash = this.getHash()
      let router = this.routeMap[hash]
      let { from, to} = this.getFrom(e)
      // 修改 this.app.current 借用了 vue 的响应式原理
      if (router.beforeEnter) { 
        router.beforeEnter(from, to, () => { 
          this.app.current = hash
        })
      } else { 
        this.app.current = hash
      }
    }

getFrom(e) { 
      let from, to
      if (e.newURL) { 
        // 这是一个 hashchange
        from = e.oldURL.split('#')[1]
        to = e.newURL.split('#')[1]
      } else { 
        // 初始化路由
        from = ''
        to = this.getHash()
      }
      return { from, to}
    }

getHash() { 
      return window.location.hash.slice(1) || '/'
    }

完整代码

// 路由入口
    
    let Vue
    
    class KRouter { 
      // Vue.use() 向外暴露 install 方法，使得可以使用
      static install(_Vue) { 
        Vue = _Vue
        // 对 Vue 做扩展
        Vue.mixin({ 
          beforeCreate() { 
            // console.log(this.$options)
            if (this.$options.router) {           
              // this.$router.push
              Vue.prototype.$krouter = this.$options.router
              // 入口配置
              // 启动路由
              this.$options.router.init()
            }
          }
        })
      }
      // Router 实例化之后，传入的参数配置
      constructor(options) { 
        // 挂载，以后可以到处使用
        this.$options = options
        this.routeMap = { }
        // 使用 Vue 的响应式机制，路由切换的时候，做一些响应
        this.app = new Vue({ 
          data: { 
            // 默认根目录
            current: '/'
          }
        })
      }
      init() { 
        // 使用插件 use 启动整个路由
        // 1. 监听 hashChange 事件
        this.bindEvents()
        // 2. 处理路由表
        this.createRouteMap()
        // console.log(this.routeMap)
        // 3. 初始化组件 router-view 和 router-link
        this.initComponent()
        // 4. 生命周期，路由守卫
      }
      initComponent() { 
        // router-view
        Vue.component('router-view', { 
          render: h => { 
            const component = this.routeMap[this.app.current].component
            // 使用 h 新建一个虚拟 DOM
            return h(component)
          },
        })
    
        Vue.component('router-link', { 
          props: { 
            to: String
          },
          render(h) { 
            // h 有三个参数：组件名，参数，子元素
            return h('a', { 
              attrs: { 
                href: '#' + this.to
              }
            },
            [this.$slots.default]
            )
          }
        })
      }
      // 处理路由表
      createRouteMap() { 
        this.$options.routes.forEach(item => { 
          this.routeMap[item.path] = item
        })
      }
      // 监听 hashChange 事件
      bindEvents() { 
        window.addEventListener('hashchange', this.onHashChange.bind(this), false)
        window.addEventListener('load', this.onHashChange.bind(this), false)
      }
      getHash() { 
        return window.location.hash.slice(1) || '/'
      }
      // this.$router.push
      push(url) { 
        // hash 模式直接赋值
        window.location.hash = url
        // history 模式使用 pushState 方法
      }
      getFrom(e) { 
        let from, to
        if (e.newURL) { 
          // 这是一个 hashchange
          from = e.oldURL.split('#')[1]
          to = e.newURL.split('#')[1]
        } else { 
          // 初始化路由
          from = ''
          to = this.getHash()
        }
        return { from, to}
      }
      onHashChange(e) { 
        // 获取当前的哈希值
        let hash = this.getHash()
        let router = this.routeMap[hash]
        let { from, to} = this.getFrom(e)
        // 修改 this.app.current 借用了 vue 的响应式原理
        if (router.beforeEnter) { 
          router.beforeEnter(from, to, () => { 
            this.app.current = hash
          })
        } else { 
          this.app.current = hash
        }
      }
    }
    
    export default KRouter

参考文章：https://juejin.cn/post/6844903695365177352

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/6776a38a4f30484486ca4fb6c23445ba.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reY5reY5piv5Y-q54uX,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://img-blog.csdnimg.cn/b87c7726d7da48de8fc1b3a9173eaca9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reY5reY5piv5Y-q54uX,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/9391207816fb465eae561c21646ca908.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reY5reY5piv5Y-q54uX,size_19,color_FFFFFF,t_70,g_se,x_16#pic_center
[177f3cf5a21049488691431f0d150cc1.gif_pic_center]: https://img-blog.csdnimg.cn/177f3cf5a21049488691431f0d150cc1.gif#pic_center
[3ab9f09cfd044eec9534067e2d29ec15.gif_pic_center]: https://img-blog.csdnimg.cn/3ab9f09cfd044eec9534067e2d29ec15.gif#pic_center