实现vue-router的自定义插件的开发
前言
vue单页面应用程序中,url发生变化的时候,不能及时的刷新,显示对应视图内容;
1.spa页面不能刷新
hash #/my
History api/about
2.根据url显示对应的内容
router-view
数据响应式:current变量持有url地址;一旦发生变化,动态重新执行render
分析实现
VueRouter实例类的组装和分析
url发生变化的时候不能及时刷新,所以咱们需要处理路由选项,监控url变化(hashchange),最后相应这个变化。
- 引用构造函数,vuerouter中需要使用
let Vue;
- 创建vueRouter类 constructor即指的是其构造函数,因为它指向的是构造函数的本身,是创建、初始化class的方法,它在一个函数中的prototype中
class VueRouter {
constructor(options) {
this.$options = options;
}
}
instal方法的实现
- VueRouter中加入有一个install方法,并注册$router
Vue = _Vue
这里需要引用构造函数,vuerouter中要使用这个
VueRouter.install = function(_Vue) {
Vue = _Vue;
}
- 挂载$router 在vue中混入beforeCreate()方法(即在创建初始化后混入)
Vue.mixin({
beforeCreate() {
if (this.$options.router) {
Vue.prototype.$router = this.$options.router;
}
}
})
- 挂载router-link组件并导出
Vue.component('router-link', Link)
export default VueRouter;
在初始化的beforeCreate()时候,如果router不为空,把当前路由挂在到$router原型上
router-link
- router-link的分析 大家熟知,router-link组件承担这跳转路由和传参等作用,所以必不可少的参数有路由和参数,在props中定义接收参数to、required权限
export default {
props:{
to:String,
required:true
}
}
- 渲染router-link 在render方法中接收渲染函数,我这里用的原生渲染方式这样更适配。 attrs定义属性,和名称和
return <a href={'#' this.to}>{this.$slots.default}</a>;
写法一样。
render(h) {
return h('a', {
attrs: {
href: '#' this.to
}
}, [
this.$slots.default
])
}
}
this.$slots.default
为引用后插槽内数据,即标签内文字标识
router-view
监控URL的变化
定义响应式current属性,监听hashChange事件
- 获取当前hash的第一位,利用
Vue.util.defineReactive
监听current的执行者
class VueRouter{
constructor(options) {
const initial = window.location.hash.slice(1) || '/'
Vue.util.defineReactive(this, 'current', initial)
}
}
- 监听hashchange事件 在上述
constructor
构造函数内监听hashchange
事件,并绑定this
window.addEventListener('hashchange', this.onHashChange.bind(this))
window.addEventListener('load', this.onHashChange.bind(this))
- 定义监听事件方法
onHashChange() {
this.current = window.location.hash.slice(1)
}
- 动态获取对应的组件 如果当前的路由地址等于current的地址,那么就渲染的组件地址对应的路由。
export default {
render(h) {
// 获取对应组件
let component = null;
const route = this.$router.$options.routes.find(route => route.path ===
this.$router.current)
if(route) {
component = route.component
return h(component);
}
}
}
- 提前处理路由表 提前处理避免每次都循环,并缓存path和route映射关系
this.routeMap = {}
this.$options.routes.forEach(route => {
this.routeMap[route.path] = route
});
总结
看到这里也就结束了,请各位掘友多多指教。这里是一个简单的自定义路由并没有嵌套功能,请多阅读源码。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhbgibag
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01