Vue|Vue Router简单版实现 VueRouter简单版实现

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 或标签改变 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实现
使用分析 【Vue|Vue Router简单版实现】首先我们看看 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
导航

Home About About2

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

实现 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 {this.$slots.default} } }

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