image.png
“您使用的是Vue的仅运行时构建，而模板编译器不可用。要么将模板预编译为呈现函数，要么使用包含编译器的构建。”
出现这个问题就涉及到了vue的构建版本的差异。
我们的使用cli 运行项目的时候，使用的是vue的运行时版本构建的，它不支持template模板编译，需要打包的时候提前编译。而完整版包含了运行时版本和编译器，在运行的时候会把模板转换成render函数，因此体积比运行时版本大10KB左右。
针对这种情况 Vue 官方已经给出我们解决的方案(参考链接)，只需要我们在vue.config.js中，将 runtimeCompiler 设置成 true 即可。
除此之外我们还可以自己去使用 render 渲染模板。
initComponents (Vue) {
Vue.component('router-link', {
props: {
to: String
},
// template: '<a :href="to"><slot></slot></a>'
render (h) { // h 是一个函数用来创建虚拟dom
return h('a', {
attrs: {
href: this.to // history 模式
}
}, [this.$slots.default])
}
})
}
继续创建 route-view 组件
我们route-view 组件的内容已经存储在 routeMap 里了，所以只需要我们将其取出转换成 vDom 即可
initComponents (Vue) {
Vue.component('router-link', {
props: {
to: String
},
// template: '<a :href="to"><slot></slot></a>'
render (h) { // h 是一个函数用来创建虚拟dom
return h('a', {
attrs: {
href: this.to // history 模式
}
}, [this.$slots.default])
}
})
const _this = this // 记录 当前 vuerouter 对象
Vue.component('router-view', {
render (h) {
const component = _this.routeMap[_this.data.current]
return h(component)
}
})
}
这个时候我们满心以为我们的vue-router 基本功能已经完成的时候，突然想到了我们忽略了一件事儿，因为我们之前的route-link 使用的 a标签 本身的默认事件是跳转并且从服务器请求。因此需要我们给 route-link 做一下改造。
initComponents (Vue) {
Vue.component('router-link', {
props: {
to: String
},
// template: '<a :href="to"><slot></slot></a>'
render (h) { // h 是一个函数用来创建虚拟dom
return h('a', {
attrs: {
href: this.to // history 模式
},
on: {
click: this.clickHandler
}
}, [this.$slots.default])
},
methods: {
clickHandler (e) {
history.pushState({/* 传递给 popstate 参数 */}, '', this.to) // 改变地址栏
this.$router.data.current = this.to // 改变current 重新出发渲染
e.preventDefault()
}
}
})
const _this = this // 记录 当前 vuerouter 对象
Vue.component('router-view', {
render (h) {
const component = _this.routeMap[_this.data.current]
return h(component)
}
})
}
截止到现在我们的基本功能已经可以使用了，但是我们发现之前提到过的 initEvent 没有实现，他的作用是注册 popstate 方法，监听浏览器地址变化，我们点击前进后退的时候就会发现 页面没有变化。因此我们还需要实现initEvent。
initEvent () {
window.addEventListener('popstate', () => { // 箭头函数不改变this指向
this.data.current = window.location.pathname
})
}
现在我们完善了我们的代码，奉上
let _Vue = null
export default class VueRouter {
constructor (options) {
this.options = options
this.data = _Vue.observable({
current: '/'
})
this.routeMap = {}
}
createRouteMap () {
this.options.routes.forEach(route => {
this.routeMap[route.path] = route.component
})
}
init () {
this.createRouteMap()
this.initComponents(_Vue)
this.initEvent()
}
initComponents (Vue) {
Vue.component('router-link', {
props: {
to: String
},
// template: '<a :href="to"><slot></slot></a>'
render (h) { // h 是一个函数用来创建虚拟dom
return h('a', {
attrs: {
href: this.to // history 模式
},
on: {
click: this.clickHandler
}
}, [this.$slots.default])
},
methods: {
clickHandler (e) {
history.pushState({/* 传递给 popstate 参数 */}, '', this.to) // 改变地址栏
this.$router.data.current = this.to // 改变current 重新出发渲染
e.preventDefault()
}
}
})
const _this = this // 记录 当前 vuerouter 对象
Vue.component('router-view', {
render (h) {
const component = _this.routeMap[_this.data.current]
return h(component)
}
})
}
initEvent () {
window.addEventListener('popstate', () => { // 箭头函数不改变this指向
this.data.current = window.location.pathname
})
}
static install (Vue) {
// 1. 判断当前插件是否被安装
if (VueRouter.install.installed) {
return
}
VueRouter.install.installed = true
// 2. 把 Vue 构造函数记录到全局变量
_Vue = Vue
// 3. 把创建 Vue 实例的时候传入的 router 对象注入到 Vue 实例上
_Vue.mixin({
beforeCreate () {
if (this.$options.router) { // 在 vue 中执行，其他组件 $options.router 不存在，保证以下代码执行一次
_Vue.prototype.$router = this.$options.router
this.$options.router.init()
}
}
})
}
}
运行！可用！正常！
vue-router 的 history 模式完成！
