Vue-router | 实现简单路由
日常开发中积累了不少可能对一些开发有帮助的简单易用的组件，好记性不如烂笔头，想对过去的一些零零乱乱的东西做一些总结，反省自己的同时也便于思考一些更优的方法，提升下开发思维???。
代码传送门（?感觉有作用的的同学帮忙点下❤️️）
效果截图
完美实现了一个简单的路由效果
router.gif
核心代码
主要结构包括VueRouter类和install方法（install方法主要由Vue.use(...)来自动触发该方法，是插件的必经之路。）
let Vue = null; // 用来保存传进来的Vue函数
class VueRouter {
constructor(options) {
this.$options = options;
this.routeMap = {};
this.app = new Vue({
data: {
current: '/'
}
})
}
init () {
this.listenURL()
// 创建路由映射
this.createRouteMap(this.$options)
// 初始化组件
this.initComponent()
}
listenURL () {
window.addEventListener('load', this.onHashChange.bind(this), false)
window.addEventListener('hashchange', this.onHashChange.bind(this), false)
}
createRouteMap (options) {
options.routes.forEach(element => {
this.routeMap[element.path] = element
});
}
initComponent () {
// 全局注册组件router-link/router-view
Vue.component('router-link', {
props: {
to: String
},
render (h) {
console.log(this.$slots.default)
return h('a', {
attrs: {
href: '#' + this.to
}
}, [this.$slots.default])
}
})
Vue.component('router-view', {
render: h => {
var component = this.routeMap[this.app.current].component
return h(component)
},
})
}
onHashChange () {
this.app.current = window.location.hash.slice(1) || '/'
}
}
VueRouter.install = function (_Vue) {
Vue = _Vue
console.log('install')
Vue.mixin({
beforeCreate () {
console.log(this.$options.router)
if (this.$options.router) {
Vue.prototype.$router = this.$options.router
this.$options.router.init()
}
}
})
}
export default VueRouter
代码块分析
constructor函数：构造方法，创建路由对象的时候调用该方法，将配置项传递进来
constructor(options) {
this.$options = options; // 用来保存routes等配置项
this.routeMap = {}; // 用来保存路由关系映射
// 利用Vue的响应式,路由改变触发其他条件（渲染组件）
this.app = new Vue({
data: {
current: '/'
}
})
}
install函数：Vue.use(...)会触发该方法，并把Vue传入
VueRouter.install = function (_Vue) {
Vue = _Vue
// 全局混入，在生命周期中做一些扩展操作
Vue.mixin({
beforeCreate () {
if (this.$options.router) {
// 1.将创建Vue对象中传入的router挂载在根组件上
Vue.prototype.$router = this.$options.router
// 2.触发init方法
this.$options.router.init()
}
}
})
}
listenURL函数：监听地址的变化
listenURL () {
// 监听初始化加载完成时候
window.addEventListener('load', this.onHashChange.bind(this), false)
// 监听URL #后面的地址变化
window.addEventListener('hashchange', this.onHashChange.bind(this), false)
}
createRouteMap函数：保存传入的routes
createRouteMap (options) {
// 取出所有routes中的元素,以path为键作映射
options.routes.forEach(element => {
this.routeMap[element.path] = element
});
}
initComponent函数：通过h函数渲染router-link和router-view组件
initComponent () {
// 全局注册组件router-link/router-view
Vue.component('router-link', {
props: {
to: String
},
render (h) {
return h('a', {
attrs: {
href: '#' + this.to
}
}, [this.$slots.default])
}
})
Vue.component('router-view', {
render: h => {
// 获取对应的组件进行渲染
var component = this.routeMap[this.app.current].component
return h(component)
},
})
}
使用
在使用上和vue-router一模一样，但是该代码仅可用hash模式
关键点
处理自定义组件，一定要对vue中的传值比较清晰了解，这里就不一一列举。在这里主要使用的一些技术包括：
技术
概述
备注
mixin
全局混入
此处是混入到Vue的生命周期中
h函数
相当于createElement
此处是创建两个路由组件
hashchange
监听地址栏地址变化
/
install方法
Vue.use(...)触发
插件核心方法
后续会持续更新其他一些有用的组件提供参考...
发表评论 (审核通过后显示评论)：