Vue Router 的内部实现机制是怎样的？
- 内容介绍
- 文章标签
- 相关推荐
本文共计544个文字，预计阅读时间需要3分钟。
Vue Router 实现原理，涉及以下知识点：Vue Router、组件、插件、混入、Vue.observable()、插槽、render 函数、运行时版本、前端路由切换时机、浏览器端路径判断和加载。
Vue Router 实现原理会用到以下几个前置知识
- 插件
- 混入
- Vue.observable()
- 插槽
- render 函数
- 运行时和完整版的 Vue
当前端路由切换的时候，在浏览器端判断当前路径，并加载当前路径对应的组件
Hash 模式- URL 中 # 后面的内容作为路径地址
- 监听 hashchange 事件
- 根据当前路由地址找到对应组件重新渲染
- 通过 history.pushState() 改变地址栏，不会向服务器发送请求
- 监听 prpstate 事件
- 根据当前路由地址找到对应组件重新渲染
// history 模式
// 新建一个 js 文件并导出一个 vueRouter 类
let _Vue = null
export default class VueRouter {
static install (Vue) {
// 接收两个参数，第一个 Vue 构造器，第二个可选的 options 对象
// 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.prototype.$router = this.$options.router
this.$options.router.init()
}
}
})
}
constructor (options) {
this.options = options
this.routeMap = {}
this.data = _Vue.observable({
current: '/'
})
}
init () {
this.createRouteMap()
this.initComponents(_Vue)
this.initEvent()
}
createRouteMap () {
// 遍历所有的路由规则，把路由规则解析成键值对的形式存储到 routeMap 中
this.options.routes.forEach(route => {
this.routeMap[route.path] = route.component
})
}
initComponents (Vue) {
Vue.component('router-link', {
props: {
to: String
},
// template: '<a :href="to"><slot></slot></a>'
render (h) {
return h('a', {
attrs: {
href: this.to
},
on: {
click: this.clickHandler
}
}, [this.$slots.default])
},
methods: {
clickHandler (e) {
history.pushState({}, '', this.to)
this.$router.data.current = this.to
e.preventDefault()
}
}
})
const self = this
Vue.component('router-view', {
render(h) {
const component = self.routeMap[self.data.current]
return h(component)
}
})
}
initEvent () {
window.addEventListener('popstate', () => {
this.data.current = window.location.pathname
})
}
}
本文共计544个文字，预计阅读时间需要3分钟。
Vue Router 实现原理，涉及以下知识点：Vue Router、组件、插件、混入、Vue.observable()、插槽、render 函数、运行时版本、前端路由切换时机、浏览器端路径判断和加载。
Vue Router 实现原理会用到以下几个前置知识
- 插件
- 混入
- Vue.observable()
- 插槽
- render 函数
- 运行时和完整版的 Vue
当前端路由切换的时候，在浏览器端判断当前路径，并加载当前路径对应的组件
Hash 模式- URL 中 # 后面的内容作为路径地址
- 监听 hashchange 事件
- 根据当前路由地址找到对应组件重新渲染
- 通过 history.pushState() 改变地址栏，不会向服务器发送请求
- 监听 prpstate 事件
- 根据当前路由地址找到对应组件重新渲染
// history 模式
// 新建一个 js 文件并导出一个 vueRouter 类
let _Vue = null
export default class VueRouter {
static install (Vue) {
// 接收两个参数，第一个 Vue 构造器，第二个可选的 options 对象
// 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.prototype.$router = this.$options.router
this.$options.router.init()
}
}
})
}
constructor (options) {
this.options = options
this.routeMap = {}
this.data = _Vue.observable({
current: '/'
})
}
init () {
this.createRouteMap()
this.initComponents(_Vue)
this.initEvent()
}
createRouteMap () {
// 遍历所有的路由规则，把路由规则解析成键值对的形式存储到 routeMap 中
this.options.routes.forEach(route => {
this.routeMap[route.path] = route.component
})
}
initComponents (Vue) {
Vue.component('router-link', {
props: {
to: String
},
// template: '<a :href="to"><slot></slot></a>'
render (h) {
return h('a', {
attrs: {
href: this.to
},
on: {
click: this.clickHandler
}
}, [this.$slots.default])
},
methods: {
clickHandler (e) {
history.pushState({}, '', this.to)
this.$router.data.current = this.to
e.preventDefault()
}
}
})
const self = this
Vue.component('router-view', {
render(h) {
const component = self.routeMap[self.data.current]
return h(component)
}
})
}
initEvent () {
window.addEventListener('popstate', () => {
this.data.current = window.location.pathname
})
}
}