手写简化版的vue-router
vue-router作为vue全家桶之一的重要插件,有必要去深究一下,今天我们就从0到1手写一个简化版本。
开始之前,我们使用路由插件时是先进行下载路由
npm i vue-router
,然后在main.js中使用app.use导入router插件。想要手写vue-router,必须先搞懂app.use()干了一件什么事情。我们去官方文档下面看看。
app.use()
安装一个插件。
-
类型
tsinterface App {use(plugin: Plugin, ...options: any[]): this } -
详细信息
第一个参数应是插件本身,可选的第二个参数是要传递给插件的选项。
插件可以是一个带
install()方法的对象,亦或直接是一个将被用作install()方法的函数。插件选项 (app.use()的第二个参数) 将会传递给插件的install()方法。若
app.use()对同一个插件多次调用,该插件只会被安装一次。

两个组件router-view 和router-link
<template><a :href="'#' + props.to"><slot></slot></a>
</template><script setup>
const props = defineProps({to: {type: String,required: true,},
});
</script><style lang="css" scoped>
</style>
<!--* @LastEditTime: 2024-08-14 10:45:56* @Description: file content
-->
<template><component :is="component"></component>
</template><script setup>
import { useRouter } from "./index.js";
import { computed } from "vue";
const router = useRouter();
const mapRouter = new Map();
const reflectMapRouter = (router) => {router.routes.forEach((route) => {// 更具路径进行组件查询,保证O(1)时间mapRouter.set(route.path, route.component);});
};
//方法执行进行组件注册
reflectMapRouter(router);
//设置为计算属性响应式更新
const component = computed(() => {const nowRoute = mapRouter.get(router.current.value);//这里注意,需要进行校验,因为用户可能输入错误网址return nowRoute ? nowRoute : null;
});
</script>
<style lang="css" scoped>
</style>
/** @LastEditTime: 2024-08-14 10:47:43* @Description: file content*/
import { ref } from "vue";
// 对所有页面暴露
const ROUTER_KEY = "__router__";export const useRouter = () => {//获取暴露的Router对象return inject(ROUTER_KEY);
}
class Router {constructor(options) {//history对象就是createHashWebHistroy返回的history对象this.history = options.history;// 路由对象数组,path,component,name等配置this.routes = options.routes;//获取当前路由地址this.current = ref(this.history.url);// 这里的方法是监听hashchange事件来更新current,切换路由//,可以先不看这一段等会会讲this.history.bindEvent(() => {this.current.value = window.location.hash.slice(1);})}//插件的install方法install(app) {// 全局声明 有一个router 全局使用的对象app.provide(ROUTER_KEY, this);//注册全局组件app.component('router-link', RouterLink);app.component('router-view', RouterView);}
}
export const createRouter = (options) => {return new Router(options);
}
export const createWebHashHistory = () => {function bindEvent(fn) {window.addEventListener('hashchange', fn);}// history 对象return {url: window.location.hash.slice(1) || '/',bindEvent}
}
相关文章:
手写简化版的vue-router
vue-router作为vue全家桶之一的重要插件,有必要去深究一下,今天我们就从0到1手写一个简化版本。 开始之前,我们使用路由插件时是先进行下载路由 npm i vue-router ,然后在main.js中使用app.use导入router插件。想要手写vue-rou…...
分享一个基于uni-app的蛋糕商城订购小程序的设计与实现(源码、调试、LW、开题、PPT)
💕💕作者:计算机源码社 💕💕个人简介:本人 八年开发经验,擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等,大家有这一块的问题可以一起交流&…...
Python绘图入门:使用Matplotlib绘制柱状图
Python绘图入门:使用Matplotlib绘制柱状图 柱状图是一种常见的数据可视化方式,能够直观地展示不同类别之间的数据差异。在Python中,Matplotlib是一个非常强大且灵活的绘图库,它不仅能绘制简单的图表,还能创建复杂的多…...
Qt5编译qmqtt库使用MQTT协议连接华为云IOT完成数据上传与交互
一、前言 随着物联网技术的发展,越来越多的设备通过网络互相连接,形成了庞大的智能系统。这些系统能够收集、分析并响应各种数据,从而实现自动化控制和智能化管理。在这个背景下,MQTT 成为了一个广泛使用的轻量级消息传输协议,特别适用于资源受限的环境,如移动应用或远程…...
mysql速起架子
wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.21-linux-glibc2.12-x86_64.tar.xz 下载mysql tar xvJf mysql-8.0.21-linux-glibc2.12-x86_64.tar.xz 解压 mv mysql-8.0.21-linux-glibc2.12-x86_64 mysql-8.0 改名 去到bin目录 cd bin mkdir data gr…...
云动态摘要 2024-08-14
给您带来云厂商的最新动态,最新产品资讯和最新优惠更新。 最新优惠与活动 注册阿里云免费领云服务器_云服务器ECS_阿里云 阿里云 2024-08-14 云上试用新玩法,个人享300元免费额度,企业享660元免费额度,多种规格随心试 [免费体验…...
Elasticsearch 桶(Bucket)聚合详解及示例
在 Elasticsearch 中,桶(Bucket)聚合是一种强大的工具,它允许我们对数据进行分组并统计每组的数量。这种聚合类型对于理解数据的分布和进行分组统计非常有用。本文将详细介绍 Elasticsearch 的桶聚合,并提供完整的示例…...
Django基础知识
文章目录 新建Django项目helloworld关联数据库admin 新建Django项目 创建django-admin startproject project_name 运行 python manage.py runserver 创建app: python manage.py startapp app_name 目录: 配置文件 settings.py 路由配置 urls.py 项目管理 manage.p…...
使用 nginx 搭建代理服务器(正向代理 https 网站)指南
简介 正向代理 简介 在企业开发环境中,局域网内的设备通常需要通过正向代理服务器访问互联网。正向代理服务器充当中介,帮助客户端请求外部资源并返回结果。局域网内也就是俗称的内网,局域网外的互联网就是外网,在一些特殊场景内…...
深入解析亚马逊数据采集工具选择:Data API/Scrape API/Pangolin采集器
引言 在当今电商领域,亚马逊已成为全球最大的在线零售平台之一。随着竞争的加剧和市场的多样化,商家和企业不仅需要优秀的产品和服务,还需要通过深入的数据分析来制定更加精准的市场策略。因此,采集亚马逊站点数据已成为企业实现…...
探索Linux多样性:主流发行版及其应用场景
目录 引言 Debian:稳定性的标杆 Ubuntu:易用性的代表 Red Hat Enterprise Linux (RHEL):企业的首选 Fedora:创新的前沿 CentOS:开源的稳定之选 Arch Linux:高级用户的定制天堂 Gentoo:性…...
CentOS7.6 HAproxy-7层负载均衡集群——实施方案
目录 1、前期环境准备 1.准备4台主机 1. 设置主机名 2. 设置IP地址然后重启网卡 3. 关闭防火墙和selinux 4. 全部的服务器完成时间统一 二、配置haproxy(192.168.200.11)服务器 1. 安装haproxy 2. haproxy 配置中分成五部分内容 3. 配置HAproxy(192.168.2…...
升级ubuntu22.10到24.04
将所有kinetic换成noble,noble是24.04源,sed或手动改。 cd /etc/aptgrep -nr kinetic将old-releases.ubuntu.com替换成国内的地址,因为2210国内源没找到,没有了,但是现在更新到24.04,国内是有的。 apt up…...
YOLO好像也没那么难?
“学YOLO的念头是想整个游戏外挂!” 目录 基本原理 模型推理 IOU交并比 NMS非极大值抑制 模型训练 损失函数LOSS 代码实现 YOLO学习渠道 基本原理 模型推理 学习一个新的神经网络结构,作者认为整明白输入和输出是怎么回事就OK了,至于…...
html编写贪吃蛇页面小游戏(可以玩)
<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>贪吃蛇小游戏</title><style>body {…...
【淘宝购买的源码靠谱吗】
文章目录 前言一、项目需求二、卖家评价三、价格质量四、源码细节五、技术支持六、合法性七、市场环境八、风险评估总结 前言 在淘宝上购买的源码质量和可靠性存在不确定性。淘宝作为一个综合性电商平台,提供了各种各样的商品和服务,包括源代码。然而&a…...
C++ | list
前言 本篇博客讲解cSTL中的list 💓 个人主页:普通young man-CSDN博客 ⏩ 文章专栏:C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题 评论区见📝 🎉欢迎大家点赞&…...
Vue3 v-bind 指令用法
在 Vue 3 中,v-bind 指令用于将表达式的值绑定到 DOM 元素的属性上。这个指令的语法与 Vue 2 相同,但有一些细微的变化和改进。 以下是 Vue 3 中 v-bind 指令的基本用法: 基本用法: <button v-bind:class"{ active: isActive }"…...
通过Go示例理解函数式编程思维
一个孩子要尝试10次、20次才肯接受一种新的食物,我们接受一种新的范式,大概不会比这个简单。-- 郭晓刚 《函数式编程思维》译者 函数式编程(Functional Programming, 简称fp)是一种编程范式,与命令式编程(Imperative Programming)、面向对象编…...
刷题DAY7
三角形面积 题目:已知三角形的边长a,b和从、,求其面积 输入:输入三个实数a,b,c,表示三边长 输出:输出面积,保留三位小数 输入:1 2 2.5 输出࿱…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...
Kafka主题运维全指南:从基础配置到故障处理
#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...
数据库正常,但后端收不到数据原因及解决
从代码和日志来看,后端SQL查询确实返回了数据,但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离,并且ai辅助开发的时候,很容易出现前后端变量名不一致情况,还不报错,只是单…...
