vue3 封装一个事件方法,支持所有页面调用

 我做的是路由跳转,因为需要支持跨项目使用,所以才使用这个方法

 在router.js中

import { createRouter, createWebHistory } from 'vue-router';// 创建路由实例和路由配置...
export const router = createRouter({history: createWebHistory(),routes: [// 路由配置...]
});

 在main.js中

import { createApp } from "vue";
import { router } from "./router";// 创建Vue应用实例app
const app = createApp(App);// 创建自定义方法
app.config.globalProperties.navigateTo = (path) => {router.push(path);
};app.use(router).mount("#app");

 在某组件中

<template><button @click="navigateTo('/about')">Go to About</button>
</template>

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

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

相关文章

数据可视化与机器学习建模:心力衰竭预测_企业科研_论文科研_毕业设计

数据分析与可视化 心力衰竭或心血管疾病 (CVD) 是全球第一大死因&#xff0c;每年夺去大约1790 万人的生命&#xff0c;占全球所有死亡人数的 31%。 大多数心血管疾病可以通过使用全民策略解决烟草使用、不健康饮食和肥胖、缺乏身体活动和有害使用酒精等行为风险因素来预防…

提高检索效率的利器--Mybatis 的一级缓存和二级缓存执行顺序

&#x1f600;前言 本篇博文是关于MyBatis缓存的执行顺序&#xff0c;希望能够帮助到您&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是…

elementUI 实现动态表单数据校验

转载http://t.csdn.cn/XuTa2 1、探讨需求 首先我们需要探讨一下需求&#xff1a; 表单中的部分el-form-item 的label都是从接口拿到的&#xff0c;需要遍历进行动态渲染。 需要给每个el-form-item加上校验至少是必填校验 有的el-form-item不需要校验&#xff0c;也不是从接口…

@monaco-editor/react组件CDN加载失败解决办法

monaco-editor/react引入这个cdn资源会load失败 网上很多例子都是这样写的&#xff0c;我这样写monaco会报错 import * as monaco from monaco-editor; import { loader } from monaco-editor/react;loader.config({ monaco });改成这样 import * as monaco from monaco-edi…

​​​amoeba实现MySQL读写分离

​​​amoeba实现MySQL读写分离 准备环境&#xff1a;主机A和主机B作主从配置&#xff0c;IP地址为192.168.131.129和192.168.131.130&#xff0c;主机C作为中间件&#xff0c;也就是作为代理服务器&#xff0c;IP地址为192.168.131.136。三台服务器操作系统为RHEL6.4 x86_64,为…

大数据课程E2——Flume的Source

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 掌握Source的AVRO Source; ⚪ 掌握Source的Exec Source; ⚪ 掌握Source的Spooling Directory Source; ⚪ 掌握Source的Netcat Source; ⚪ 掌握Source的Sequence Generator Source;…

搞活系列-Java NIO之偏偏不用buffer.flip()会出现什么问题?

最近看博客又看到了Java NIO相关的博客&#xff0c;其中有讲解NIO和传统IO关于文件复制的文章&#xff0c;看到了如下的代码&#xff1a; /**** channel用例* 基于channel的文件复制*/Testpublic void fileCopyByChannel(){try {FileInputStream fileInputStream new FileInpu…

TypeScript 【type】关键字的进阶使用方式

导语&#xff1a; 在前面章节中&#xff0c;我们了解到 TS 中 type 这个关键字&#xff0c;常常被用作于&#xff0c;定义 类型别名&#xff0c;用来简化或复用复杂联合类型的时候使用。同时也了解到 为对象定义约束接口类型 的时候所使用的是 Interfaces。 其实对于前面&#…

iOS 应用上架流程详解

iOS 应用上架流程详解 欢迎来到我的博客&#xff0c;今天我将为大家分享 iOS 应用上架的详细流程。在这个数字化时代&#xff0c;移动应用已经成为了人们生活中不可或缺的一部分&#xff0c;而 iOS 平台的 App Store 则是开发者们发布应用的主要渠道之一。因此&#xff0c;了解…

智安网络|常见的网络安全陷阱:你是否掉入了其中?

在数字化时代&#xff0c;网络安全成为了一个重要的议题。随着我们越来越多地在互联网上进行各种活动&#xff0c;诸如在线银行交易、社交媒体分享和在线购物等&#xff0c;我们的个人信息也更容易受到攻击和滥用。虽然有许多关于网络安全的指导和建议&#xff0c;但仍然有许多…

暑假刷题第19天--8/1

170. 加成序列 - AcWing题库&#xff08;dfs迭代加深--重点理解&#xff09; #include<iostream> using namespace std; int n; int a[11]; int dfs(int x,int h){if(x>h1)return 0;if(a[x-1]n)return 1;bool st[130]{};for(int i1;i<x-1;i){for(int j1;j<i;j)…

【ChatGPT】ChatGPT是如何训练得到的?

前言 ChatGPT是一种基于语言模型的聊天机器人&#xff0c;它使用了GPT&#xff08;Generative Pre-trained Transformer&#xff09;的深度学习架构来生成与用户的对话。GPT是一种使用Transformer编码器和解码器的预训练模型&#xff0c;它已被广泛用于生成自然语言文本的各种…

【前端知识】React 基础巩固(四十)——Navigate导航

React 基础巩固(四十)——Navigate导航 一、Navigate的基本使用 新建Login页面&#xff0c;在Login中引入Navigate&#xff0c;实现点击登陆按钮跳转至/home路径下&#xff1a; import React, { PureComponent } from "react"; import { Navigate } from "reac…

HTML5 API 多端通信桥 MessageChannel 技术

这个特别有意思&#xff0c;可以将其理解为通信桥的概念&#xff0c;桥有两个端&#xff08;port1&#xff0c;port2&#xff09;只要将port1&#xff0c;port2指定到任意两个进程&#xff0c;无论是iframe-iframe&#xff0c;iframe-worker&#xff0c;parent-child-iframe&am…

【数据结构】图文并茂,通过逻辑图带你轻松拿捏链表,实现各种接口功能

君兮_的个人主页 勤时当勉励 岁月不待人 C/C 游戏开发 Hello,米娜桑们&#xff0c;这里是君兮_&#xff0c;我们接着之前讲过的顺序表来继续介绍初阶数据结构的内容&#xff0c;今天给大家带来的是有关链表的基本知识和各种接口功能的实现 好了&#xff0c;废话不多说&#x…

英语语法 名词和冠词 详解

目录 一、名词概述 1.基本介绍 : 2.作用 : (在句子中可担任的语法成分) 1 作主语 2 作宾语 3 作表语 4 作定语 5 作同位语 二、专有名词和普通名词 1.专有名词&#xff1a; 1 定义 2 示例 3 关于名词的大小写 2.普通名词&#xff1a; 1 定义 2 示例 3 分类 三、可数名词和不…

kubernetes错误汇总

title: “kubernetes错误汇总” categories: - “技术” tags: - “Kubernetes” - “错误汇总” toc: false original: true draft: false 1、增加 master etcd 报错 1.1、错误描述 由于创建的k8s集群&#xff0c;其中有一个master节点初始化失败&#xff0c;先删除了这个节…

LeetCode 周赛上分之旅 # 36 KMP 字符串匹配殊途同归

⭐️ 本文已收录到 AndroidFamily&#xff0c;技术和职场问题&#xff0c;请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问。 学习数据结构与算法的关键在于掌握问题背后的算法思维框架&#xff0c;你的思考越抽象&#xff0c;它能覆盖的问题域就越广&#xff0c;理解难度…

day50-Insect Catch Game(捉虫游戏)

50 天学习 50 个项目 - HTMLCSS and JavaScript day50-Insect Catch Game&#xff08;捉虫游戏&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport"…

codeblocks编译lvgl报错

codeblocks编译lvgl报错 1.报错内容2.解决方案3.lvgl本身代码报错 1.报错内容 error: unknown type name _In_opt_ ...2.解决方案 官网下载&#xff1a; 这里的Compiler’s installation directory 选择自带的 3.lvgl本身代码报错 undefined reference to _lv_utils_bse…