Vue Router简单版实现

SPA(single page application) :单页面应用程序，只有一个完整的页面，加载时，不会加载整个页面。当路由发生变化时，监听路由的变化，不会请求页面，而是只更新视图。路由描述的是 URL 与 UI 之间的映射关系，即 URL 变化引起 UI 更新（无需刷新页面），在 Vue 生态种提供了 VueRouter ，来实现单页面前端路由。VueRouter 常用的模式有两种：Hash模式 和 History模式。

Hash模式

VueRouter 默认 hash 模式。hash 是 URL 中 hash (#) 及后面的那部分，常用作锚点在页面内进行导航，改变 URL 中的 hash ，浏览器是不会重新加载的。hash (#) 仅仅只是对浏览器进行指导，它不会被包括在 http 请求中,故也不会重新加载页面， hash 模式的原理通过 onhashchange 事件监听 URL 的变化。

History模式

history模式是利用了 HTML5 History 新增的 pushState() 和replaceState() 方法以及 popstate 事件实现的。通过浏览器前进后退改变 URL 时会触发 popstate 事件；但是通过 pushState/replaceState 或 <a> 标签改变 URL 不会触发 popstate 事件。除了之前的 back , forward , go 方法, pushState/replaceState 也提供了对历史记录修改的功能。但修改时，虽然修改了 URL ，但是不会立即向服务端发请求。

当你使用 history 模式时，URL 就像正常的 url，例如 http://localhost:8080/about ，不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://localhost:8080/about 就会返回 404。所以，服务端y要增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

简单版的VueRouter实现

使用分析

首先我们看看 VueRouter 的使用方式

安装 VueRouter，通过 import VueRouter from 'vue-router' 引入，通过 Vue.use(VueRouter) 使得每个组件都可以拥有 store 实例

import VueRouter from 'vue-router' 
Vue.use(VueRouter)

创建Router实例，router.js

...
const router = new VueRouter({
  routes
})
export default router

在根组件上添加该实例，main.js

import router from './router'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

添加路由视图，App.vue

<router-view />

导航

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/about2">About2</router-link>

需求分析

根据以上使用方式，我们需要实现：

实现 VueRouter 类和 install 方法。
全局组件：router-view 用于显示匹配组件内容，router-link 用于跳转。
监控url变化：监听 hashchange 或 popstate 事件。
创建一个响应式的属性 current，当它改变时获取对应组件并显示。

先在根目录下创建文件 router 文件和其他文件：

router
|-- index.js
|-- router-link.js
|-- router-view.js
`-- vue-router.js

VueRouter类和install方法

// router/vue-router.js
import Link from './router-link'
import View from './router-view'
let Vue
class VueRouter {
  constructor (options) {
    this.$options = options
    // 利用Vue提供的defineReactive做响应化，当current变化的时候，依赖的组件会重新render
    Vue.util.defineReactive(this, 'current', '/')
    // 监控url变化
    window.addEventListener('hashchange', this.onHashChange.bind(this))
    window.addEventListener('load', this.onHashChange.bind(this))
    // 创建一个路由映射表
    this.routeMap = {}
    options.routes.forEach(route => {
      this.routeMap[route.path] = route
    })
  }
  onHashChange () {
    this.current = window.location.hash.slice(1)
  }
}
VueRouter.install = function (_Vue) {
  Vue = _Vue
  Vue.mixin({
    beforeCreate () {
      // 确保根实例的时候才执行
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router
      }
    }
  })
  Vue.component('router-link', Link)
  Vue.component('router-view', View)
}
export default VueRouter

router-link组件

// router/router-link.js
export default {
  props: {
    to: {
      type: String,
      required: true
    }
  },
  render (h) {
    return h('a', { attrs: { href: '#' + this.to } }, this.$slots.default)
    // return <a href={'#' + this.to}>{this.$slots.default}</a>
  }
}

routor-view组件

// router/router-view.js
export default {
  render (h) {
    // 获取path对应的component
    const { routeMap, current } = this.$router
    const component = routeMap[current].component || null
    return h(component)
  }
}

实例化Router

// router/index.js
import Vue from 'vue'
import VueRouter from './vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/about2',
    name: 'About2',
    component: () => import(/* webpackChunkName: "about2" */ '../views/About2.vue')
  }
]
const router = new VueRouter({
  routes
})
export default router