FVueRouter.install = function(_Vue){
//将Vue的构造函数保存起来
Vue = _Vue;
//实现一个混入操作的原因,插件的install阶段非常早,此时并没有Vue实例
//因此,使用mixin,延迟对应操作到Vue实例构建的过程中来执行。
Vue.mixin({
beforeCreate(){
//获取到Router的实例,并将其挂载在原型上
if(this.$options.router){
//根组件beforeCreate时只执行一次
Vue.prototype.$router = this.$options.router;
this.init();
}
}
})
}
export default FVueRouter;
这里是最为简单的一种实现。有几个值得注意的点:
如上代码,将最基本的一个Vue Router 的代码架子搭建起来了,能够运行。但细微处依然需要酌情考虑。
关于插件的写法:自定义插件内部必须实现一个 install 方法,传入参数是Vue的构造函数。
使用了一个新的Vue 实例,将 URL 的 hash 变量进行数据响应化处理。
关于渲染函数 render 的参数 h,它实际上是 createElement 函数。具体用法值得深究。代码中使用的是最为简单的处理方式。
结尾
在本文中,我们讲解了 前端路由常见的两种模式:Hash 模式与 History 模式。同时,我们尝试自己实现了一个最为简单的 Vue Router。更多相关的 Vue Router 的细节,可以参考其官网。希望本文对你有用。
到此这篇关于Vue Router的手写实现方法实现的文章就介绍到这了,更多相关Vue Router手写内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网!










