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或 标签改变 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
