自定义插件vue-router简单实现hashRouter设计思路

步骤

1.挂载 vue.prototype.$router

2.声明两个组件

router-view this.$router.current=>component => h(component)

router-link h('a',{attrs:{href:'#'+this.to}},this.$slots.default)

3.url的监听:window hashchange的改变

4.定义响应式current,defineReactive()

实现VueRouter类

let Vue
// vueRouter是一个类,一个插件
class VueRouter {constructor(options) {this.$options = options}
}VueRouter.install = function (_Vue) {//保存引用Vue = _Vue//挂在一下vueRouter到vue原型//利用全局混入,全局执行代码,在vue实例beforeCreate时获取到router,因为在main.js中生成vue实例在VueRouter挂载到Vue之后,所以常规无法获取到router,Vue.mixin({beforeCreate() {if (this.$options.router) { //避免每次实例创建都触发,只有根实例上存在的才触发。Vue.prototype.$router = this.$options.router}}})//声明两个全局组件,router-viewport,router-linkVue.component('router-link', {props: {to: {type: String,required: true}},//预编译情况下,template是不能使用的,这里要使用render// template:'<a>123</a>'render(h) {// return <a href={'#'+this.to}>{this.$slots.default}</a> jsx语法也可以使用return h('a', {attrs: { href: "#" + this.to }}, this.$slots.default) //this.$slots.default 获取内容}})Vue.component('router-view', {render(h) {return h('div', 'router-view')}})
}export default VueRouter

这里有个难点,就是如何将router挂载到vue原型上,我们采用了mixin的用法,在vue实例beforeCreate时获取到router,并挂在到实例上。

怎么理解呢?在router.js中,Vue.use(VueRouter)触发install方法,但是在此时,并没有生成router,是在new VueRouter之后生成的router,并且挂载到了Vue,此时才有VueRouter,利用全局混入,延迟执行挂载到Vue原型上,这样就可以获取到router实例了。

import Vue from 'vue'
// import VueRouter from 'vue-router'
import VueRouter from '@/krouter/kvue-router'
Vue.use(VueRouter)//执行install方法,router还未被创建
const routes = [{path: '/home',name: 'home',component: () => import('@/components/Home.vue')},{path: '/about',name: 'about',component: () => import('@/components/About.vue')},
]const router = new VueRouter({routes
})
export default router
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')

监听url变化,渲染组件

class VueRouter {constructor(options) {this.$options = options//声明一个响应式current//渲染函数如果压重复执行,必须依赖响应式数据Vue.util.defineReactive(this,'current',window.location.hash.slice(1) || '/') //需要#后面的部分//监听url变化window.addEventListener('hashchange', () => {this.current = window.location.hash.slice(1)})}
}

这里使用Vue工具类定义响应式current,必须是响应式current,否则不生效,在router-view处读取并渲染对应组件,在这里Vue的原型对象已经挂载了this.$router,this.$router又是VueRouter的实例,所以在这上面能够找到对应的current属性,所以在current变化的时候,在引用到current的地方都会被通知到,然后渲染组件。

Vue.component('router-view', {render(h) {const obj = this.$router.$options.routes.find(el=>this.$router.current==el.path)return h(obj.component)}})

但是每次都要去遍历循环字典,也不是很合理,我们可以优化一下,缓存一下path和route映射关系

路由嵌套

思路:参考源码思路,给当前routerView深度标记,然后根据当前页面路由获取当前路由数组,其中包括一级和二级路由,然后使用depth获取对应的组件,然后并渲染。

Vue.component('router-view', {render(h) {//标记当前router-view深度this.$vnode.data.routerView = truelet depth = 0let parent = this.$parentwhile (parent) {const vnodeData = parent.$vnode && parent.$vnode.dataif (vnodeData) {if (vnodeData.routerView) {//说明当前的parent是一个routerViewdepth++}}parent = parent.$parent}let component = nullconst route = this.$router.matched[depth]if (route) {component = route.component}return h(component)}})

此时我们不再使用current来做响应式,使用matched数组获取匹配关系,VueRouter实例创建时调用match方法,获取路由数组,并且在路由发生变化时重新获取路由数组matched。

class VueRouter {constructor(options) {this.$options = options//声明一个响应式current//渲染函数如果压重复执行,必须依赖响应式数据// Vue.util.defineReactive(this,'current',window.location.hash.slice(1) || '/') //需要#后面的部分this.current = window.location.hash.slice(1) || '/' //初始值Vue.util.defineReactive(this, 'matched', [])// match方法可以递归的遍历路由表获取匹配关系的数组this.match()//监听url变化window.addEventListener('hashchange', () => {this.current = window.location.hash.slice(1)this.matched=[]this.match()})}match(routes) {routes = routes || this.$options.routesconsole.log(routes);//递归遍历路由表for (const route of routes) {if (this.current.indexOf(route.path)!=-1) {this.matched.push(route)if (route.children) {this.match(route.children)}return}}}
}

附完整代码:

//vue-router插件
let Vue
// vueRouter是一个类,一个插件
class VueRouter {constructor(options) {this.$options = options//声明一个响应式current//渲染函数如果压重复执行,必须依赖响应式数据// Vue.util.defineReactive(this,'current',window.location.hash.slice(1) || '/') //需要#后面的部分this.current = window.location.hash.slice(1) || '/' //初始值Vue.util.defineReactive(this, 'matched', [])// match方法可以递归的遍历路由表获取匹配关系的数组this.match()//监听url变化window.addEventListener('hashchange', () => {this.current = window.location.hash.slice(1)this.matched=[]this.match()})}match(routes) {routes = routes || this.$options.routes//递归遍历路由表for (const route of routes) {if (this.current.indexOf(route.path)!=-1) {this.matched.push(route)if (route.children) {this.match(route.children)}return}}console.log(this.matched);}
}VueRouter.install = function (_Vue) {//保存引用Vue = _Vue//挂在一下vueRouter到vue原型//利用全局混入,全局执行代码,在vue实例beforeCreate时获取到router,因为在main.js中生成vue实例在VueRouter挂载到Vue之后,所以常规无法获取到router,Vue.mixin({beforeCreate() {if (this.$options.router) { //避免每次实例创建都触发,只有根实例上存在的才触发。Vue.prototype.$router = this.$options.router}}})//声明两个全局组件,router-viewport,router-linkVue.component('router-link', {props: {to: {type: String,required: true}},//预编译情况下,template是不能使用的,这里要使用render// template:'<a>123</a>'render(h) {// return <a href={'#'+this.to}>{this.$slots.default}</a> jsx语法也可以使用return h('a', {attrs: { href: "#" + this.to }}, this.$slots.default) //this.$slots.default 获取内容}})Vue.component('router-view', {render(h) {//标记当前router-view深度this.$vnode.data.routerView = truelet depth = 0let parent = this.$parentwhile (parent) {const vnodeData = parent.$vnode && parent.$vnode.dataif (vnodeData) {if (vnodeData.routerView) {//说明当前的parent是一个routerViewdepth++}}parent = parent.$parent}let component = nullconsole.log(this.$router.matched);const route = this.$router.matched[depth]if (route) {component = route.component}return h(component)}})
}export default VueRouter
import Vue from 'vue'
// import VueRouter from 'vue-router'
import VueRouter from '@/krouter/kvue-router'
Vue.use(VueRouter)//执行install方法,router还未被创建
const routes = [{path: '/home',name: 'home',component: () => import('@/components/Home.vue')},{path: '/about',name: 'about',component: () => import('@/components/About.vue'),children: [{path: '/about/info',component: {render(h) {return h('div', 'info page')}}}]},
]const router = new VueRouter({routes
})
export default router

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/213421.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Python提取PDF文件中指定页面的内容

在日常工作和学习中&#xff0c;我们经常需要从PDF文件中提取特定页面的内容。在本篇文章中&#xff0c;我们将介绍如何使用Python编程语言和两个强大的库——pymupdf和wxPython&#xff0c;来实现这个任务。 1. 准备工作 首先&#xff0c;确保你已经安装了以下两个Python库&…

JavaScript深拷贝和浅拷贝

对于原始数据类型&#xff0c;并没有深浅拷贝的区别&#xff0c;深浅拷贝都是对于引用数据类型而言&#xff0c;如果我们要赋值对象的所有属性都是引用类型可以用浅拷贝 浅拷贝&#xff1a;只复制一层对象&#xff0c;当对象的属性是引用类型时&#xff0c;实质复制的是其引用&…

【办公软件】Outlook启动一直显示“正在启动”的解决方法

早上打开电脑Outlook2016以后&#xff0c;半个多小时了&#xff0c;一直显示这个界面&#xff1a; 解决办法 按WIN R键打开“运行”&#xff0c;输入如下命令&#xff1a; outlook.exe /safe 然后点击“确定” 这样就进入了Outlook的安全模式。 点击“文件”->“选项”-…

第6节:Vue3 调用函数

在Vue3中&#xff0c;你可以使用setup函数来调用函数。 <template><button click"handleClick">点击我</button> </template><script> import { ref } from vue;export default {setup() {// 创建一个响应式的引用const count ref(0…

nbcio-vue下载安装后运行报错,diagram-js没有安装

更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/nbcio-boot 前端代码&#xff1a;https://gitee.com/nbacheng/nbcio-vue.git 在线演示&#xff08;包括H5&#xff09; &#xff1a; http://122.227.135.243:9888 根据…

047:vue加载循环倒计时 示例

第047个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

基于java web的网上书城系统的设计与实现论文

摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff0c;商品交易当然也不能排除在外&#xff0c;随着商品交易管理的不断成熟&#xff0c;它彻底改变了过去传统的经营管理方式&#xff0c;不仅使商品…

32、Bean的生产顺序是由什么决定的?

Bean的生产顺序是由什么决定的? BeanDefinition的注册顺序是有什么决定的? Bean在生产之前有个临时状态:BeanDefinition;存储着bean的描述信息。由BeanDefinition决定着Bean的生产顺序。会按照BeanDefinition的注册顺序来决定Bean的生产顺序。因为所有的BeanDefinition存…

Lua字符串(包含任意字符,如中文)任意位置截取

常规的截取只需要lua自带的api就可以解决问题:如 string.sub 但是当字符串之中含有中文或者符号的时候,这些接口就麻爪了,当然lua后续更新有可能支持,至少本少当前的Lua版本是不支持的。 废话少说,直接上代码和测试用例 -- 判断utf8字符byte长度 function stringTool.ch…

统信UOS_麒麟KYLINOS上跨架构下载离线软件包

原文链接&#xff1a;统信UOS/麒麟KYLINOS上跨架构下载离线软件包 hello&#xff0c;大家好啊&#xff0c;今天给大家带来一篇在统信UOS/麒麟KYLINOS上跨架构下载离线软件包的实用教程。在我们的日常工作中&#xff0c;可能会遇到这样的情况&#xff1a;需要为不同架构的设备下…

【总结】机器学习中的15种分类算法

目录 一、机器学习中的分类算法 1.1 基础分类算法 1.2 集成分类算法 1.3 其它分类算法&#xff1a; 二、各种机器学习分类算法的优缺点 分类算法也称为模式识别&#xff0c;是一种机器学习算法&#xff0c;其主要目的是从数据中发现规律并将数据分成不同的类别。分类算法通…

鸿蒙OS应用开发之数据类型

前面学习了一个简单的例子,这是多年来学习应用程序开发的经典路径,在这里也是这种待遇,通过这样的学习明白了一个简单应用是怎么样构成的,知道它是怎么运行输出的。在这个基础之上,你还是不会开发应用程序的,因为你还没有学习鸿蒙应用的开发语言基础,所以在这里要学习一…

nvue页面用法uniapp

1.介绍 Nvue是一个基于weex改进的原生渲染引擎&#xff0c;它在某些方面要比vue更高性能&#xff0c;在app上使用更加流畅&#xff0c;但是缺点也很明显&#xff0c;没有足够的api能力&#xff0c;语法限制太大&#xff0c;所以nvue适用于特定场景&#xff08;需要高性能的区域…

排序算法——桶排序/基数排序/计数排序

桶排序 是计数排序的升级版。它利用了函数的映射关系&#xff0c;高效与否的关键就在于这个映射函数的确定。桶排序 (Bucket sort)的工作的原理&#xff1a; 假设输入数据服从均匀分布&#xff0c;将数据分到有限数量的桶里&#xff0c;每个桶再分别排序&#xff08;有可能再使…

pve(proxmox)宿主机奔溃无法进入系统,lxc容器和虚拟机迁移,无备份,硬盘未损坏,记录数据找回过程及思考

pve的主机突然CPU满载,然后远程断电后pve就无法启动了,之前一直上面的虚拟机和容器也没有备份,折腾了两天总算找回来了记录一下处理过程和思路,方便后续查找。 一、隐患分析 1.周四突然手欠,由于之前家里的pve主机老给我发邮件,提示我硬盘有问题,但可以正常使用,我从…

【使用apache snakeyaml 管理yml文件】

使用apache snakeyaml 管理yml文件 1. 一个Yaml工厂2.Yaml工具类3. 测试类4. 完成 &#xff01; OK 1. 一个Yaml工厂 public class YamlFactory {public static YamlUtil get(){return new YamlUtil();} }2.Yaml工具类 Slf4j public class YamlUtil {private Yaml yaml;publi…

想进阶JAVA高级程序员吗?多线程必学

❤️作者主页&#xff1a;小虚竹 ❤️作者简介&#xff1a;大家好,我是小虚竹。2022年度博客之星评选TOP 10&#x1f3c6;&#xff0c;Java领域优质创作者&#x1f3c6;&#xff0c;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;掘金年度人气作…

【SpringSecurity】-- 认证、授权

文章目录 SpringSecurity简介快速入门1.准备工作1.2引入SpringSecurity 认证1.登录校验流程2.原理2.1SpringSecurity完整流程2.2认证流程详解 3.解决问题3.1思路分析3.2准备工作3.3.实现3.3.1数据库校验用户3.3.2密码加密存储3.3.3登录接口3.3.4认证过滤器3.3.5退出登录 授权1.…

输入一组数据,以-1结束输入[c]

我们新手写题时总能看到题目中类似这样的输入 没有给固定多少个数据&#xff0c;我们没有办法直接设置数组的元素个数&#xff0c;很纠结&#xff0c;下面我来提供一下本人的方法&#xff08;新手&#xff0c;看到有错误或者不好的地方欢迎大佬指出&#xff0c;纠正&#xff0…

c语言中的 *, , ** 符合代表什么意思

在C语言中&#xff0c;“&”主要有两个用途。 取地址运算符&#xff1a;C语言中&#xff0c;"&"用来返回一个变量的内存地址。例如&#xff0c;假设我们定义了一个整数变量 int a 10;&#xff0c;那么 &a 就代表了这个变量所在的内存地址。 位运算符&a…