本文主要是介绍vue-router1.x实现,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
/**
* 1、实现并生命了全局注册的组件,分别是router-link、router-view
* 2、实现install: this.$router.push()
*/
/**
* vue插件怎么写
* 1)function/对象
* 2)要求必须又一个install方法
*/
let Vue; // 保存Vue的构造函数,在插件中使用
class VueRouter {
constructor(options) {
this.$options = options
// 把this.current变为响应式的数据
// 将来数据一旦发生变化,router-view的render函数能够重新执行
let initial = window.location.hash.slice(1) || '/'
Vue.util.defineReactive(this, "current", initial)
window.addEventListener('hashchange', () => {
this.current = window.location.hash.slice(1) || '/'
})
}
}
VueRouter.install = (_Vue) => {
Vue = _Vue
// 挂载$router属性 this.$router.push
// 全局混入:(延迟下面的逻辑到router创建完毕,并且附加到选项上时才执行
Vue.mixin({
beforeCreate () {
// 注意此钩子在每个组件创建实例的时候都会调用
// 根实例才有该选项
if (this.$options.router) {
Vue.prototype.$router = this.$options.router
}
},
})
// 实现router-link router-view
// <router-link to="/">Home</router-link>
// 转为:<a href="/"></a>
Vue.component('router-link', {
props: {
to: {
type: String,
required: true
}
},
render (h) {
return h('a', {
attrs: {
href: `#${this.to}`
}
}, this.$slots.default)
}
})
Vue.component('router-view', {
render (h) {
let component = null
// 获取当前路由所对应的组件,并将它渲染出来
const current = this.$router.current
const route = this.$router.$options.routes.find(route => route.path === current)
if (route) {
component = route.component
}
return h(component)
}
})
}
export default VueRouter
这篇关于vue-router1.x实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!