Vue Router简单版实现

325 阅读2分钟

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 的使用方式

  1. 安装 VueRouter,通过 import VueRouter from 'vue-router' 引入,通过 Vue.use(VueRouter) 使得每个组件都可以拥有 store 实例
import VueRouter from 'vue-router' 
Vue.use(VueRouter)
  1. 创建Router实例,router.js
...
const router = new VueRouter({
  routes
})
export default router
  1. 在根组件上添加该实例,main.js
import router from './router'
new Vue({
  router,
  renderh => h(App)
}).$mount('#app')
  1. 添加路由视图,App.vue
<router-view />
  1. 导航
<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: {
      typeString,
      requiredtrue
    }
  },
  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',
    componentHome
  },
  {
    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