当前位置: 首页 > news >正文

vue2.x中使用JS与路由守卫配置、vue2.x中使用TS与路由守卫的配置和vuex的配置以及TS在vue2.x中的使用说明

vue2.x

事件修饰符

<button @click.stop.self="handleDelete(item)"></button>

在使用 $confirm 时,使用 await 方式时,需要添加 catch 回调,否则无法获取 $confirm 关闭和取消时的标识值,并且后续代码停止执行。如下:

const action = await this.$confirm('文件删除后无法恢复,是否删除?', '删除提示').catch(s => s)// action === 'confirm' 确认删除
// action === 'cancel' 取消删除
// action === 'close' 关闭提示框

JS+Vue-router

在当前路由界面调用 this.$router.push 访问当前页面报错问题解决方法如下:

const originPush = Vue.prototype.push
Vue.prototype.push = function(data) {return originPush.call(data).catch(err => err)
}

TS+Vue

参考博客:https://juejin.cn/post/6876020863683002382

import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { Route, NavigationGuardNext } from 'vue-fouter'
import Header from '@/components/Header'
import User from '@/types/one'@component({ // 相当于 components: { Header }components: {Header    }
})
export default class Home extends Vue {// 相当于 props: { msg: '' }@Prop private msg!: string;// 相当于 { props: { title: { type: string, default: '标题' }, required: false } }@Prop({ type: string, default: '标题' }) readonly title?:string// 相当于 { props: { author: { type: Object, default: { name: '-', age: '-' }, required: true } } }@Prop({ type: Object, default: () => ({ name: '-', age: '-' }) }) readonly author!: User// 相当于 data() { message: 'hello world!' }message: string = 'hello world!';// 相当于 computed: { messageInfo() { return this.msg + this.message } }get messageInfo() {return this.msg + this.message}// 相当于 watch: { '$route': { handler: (val, oldVal) { console.log('$router watch', val, oldVal) }, immediate: true } }@Watch('$route', { immediate: true }) changeRouter(val: Route, oldVal: Route) {console.log('$router watch', val, oldVal)    }// 相当于 computed: { headerRef: { cache: false, get() { return this.$refs.header as Header } } }@Ref('header') readonly headerRef!: Headercreated() {}// 相当于 methods: { handleSubmit() { console.log('handleSubmit') } }handleSubmit() {console.log('handleSubmit')}
}

TS+Vue-router

在当前路由界面调用 this.$router.push 访问当前页面报错问题解决方法如下:

const originPush = Vue.prototype.push
Vue.prototype.push = function (data: any) {try {return originPush.call(data)?.catch(err: any => err)    } catch (error: any) {return Promise.reject(error)    }
}

TS+vuex

// @/store/index.ts
import { Vuex } from 'vuex'
const store = new Vuex.Store<{}>({})
export default store
// @/store/modules/user.ts
import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators'
import store from '../index'type MenuItem = {menuName: string,menuId: number,parentId: number,url: string,sysUrl: string
}type UserState = {menu: MenuItem[]
}const menu: MenuItem[] = [{ menuId: 1, parentId: 0, url: '/home', sysUrl: '/home', menuName: '首页' }
]@Module({ dynamic: true, store, name: 'user', namespaced: true })
class UserModule extends VuexModule implements UserState {menu: MenuItem[] = []@Mutationprivate _setMenu(data: MenuItem[]) {this.menu = data}@Actionasync login() {return new Promise((resolve, reject) => {resolve({ obj: { data: { menu: [] } } })})}
}export default getModule(UserModule)

TS + Echarts

在 vue2.x + ts 中引入 echarts 时,json文件引入失败。解决方法是在 tsconfig.json 中添加 resolveJsonModule: true, 注意:这个属性要放在paths属性之前,否则无效。

import jiangsu from '@/assets/map/jiangsu.json'
{ "resolveJsonModule": true }

在 vue2.x + ts 中引入 echarts 时, 引入的 .json 文件无法识别类型,解决方法是使用 jiangsu as any 可以解决问题。

import jiangsu from '@/assets/map/jiangsu.json'
import * as echarts from 'echarts'
echarts.registerMap('jiangsu', jiangsu as any)

相关文章:

vue2.x中使用JS与路由守卫配置、vue2.x中使用TS与路由守卫的配置和vuex的配置以及TS在vue2.x中的使用说明

vue2.x 事件修饰符 <button click.stop.self"handleDelete(item)"></button>在使用 $confirm 时&#xff0c;使用 await 方式时&#xff0c;需要添加 catch 回调&#xff0c;否则无法获取 $confirm 关闭和取消时的标识值&#xff0c;并且后续代码停止执…...

C语言第三十二弹---打印整数二进制的奇数位和偶数位

使用C语言打印整数二进制的奇数位和偶数位。 思路&#xff1a;分别实现奇数位和偶数位&#xff0c;那么二进制只有0 和 1 那么如何判断一个数的二进制位是0还是1呢?那我们就可以使用位操作符&与1比较&#xff0c;都是1证明该二进制位是1&#xff0c;为0证明该二进制位是0…...

车载电子电器架构 ——电子电气架构设计方案概述

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 注:本文1万多字,认证码字,认真看!!! 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证…...

《C++PrimePlus》第10章 对象和类

10.1 过程性编程和面向对象编程 10.2 抽象和类 10.3 类的构造函数和析构函数 类的定义和使用&#xff08;买卖股票&#xff09; 头文件stock10.h #ifndef __STOCK00__H__ #define __STOCK00__H__#include <string>class Stock { // pravate的内容只能通过public访问 p…...

实现极坐标图表QPolarChart的角度轴范围是[0,360]时,0度在水平右侧

目录 参考角度轴范围是[0,360]时&#xff0c;0度在水平右侧.h.cpp 参考 Qt数据可视化(QPolarChart雷达图) 默认QPolarChart的范围是[0,360]时&#xff0c;0度在垂直上方 如官方例子QValueAxis角度轴范围是[-100,100] 角度轴范围是[0,360]时&#xff0c;0度在水平右侧 原理&am…...

讲述 什么是鸿蒙 为什么需要鸿蒙 为什么要学习鸿蒙

首先 我们为什么要学习鸿蒙开发&#xff1f; 因为 鸿蒙发展前景巨大 鸿蒙自发布依赖 一直受社会各界关注 强两百的 App厂商 大部分接受了与鸿蒙的合作 硬件也有非常多与鸿蒙合作的厂商 鸿蒙的合作企业基本已经覆盖整个互联网客户的主流需求 所以鸿蒙的崛起不过是早晚的问题 …...

【深度学习笔记】05 线性回归

线性回归 线性回归基于几个简单的假设&#xff1a; 首先&#xff0c;假设自变量 x \mathbf{x} x和因变量 y y y之间的关系是线性的&#xff0c; 即 y y y可以表示为 x \mathbf{x} x中元素的加权和&#xff0c;这里通常允许包含观测值的一些噪声&#xff1b; 其次&#xff0c;我…...

二叉树算法—后继节点

与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 1 后继节点1.1 解题思路1.2 代码实现 &#x1f48e;总结 1 后继节点 1.1 解题思路 二叉树节点结构定义如下&#xff1a; public static class Node { public int cal; public Node left; public Node right; public…...

C语言做一个恶作剧关机程序

一、项目介绍 C语言实现一个简单的"流氓软件"&#xff0c;一个可以强制关机恶作剧关机程序&#xff0c;输入指定指令可以解除 二、运行截图 然后当你输入“n”才可以解锁关机。 三、完整源码 #include <stdlib.h> #include <stdio.h> #include <s…...

数据结构 / 计算机内存分配

1. Linux 32位系统内存分配 栈(stack): 先进后出, 栈区变量先定义的后分配内存, 栈区地址从高到低分配堆(heap): 先进先出, 栈区变量先定义的先分配内存, 堆区地址从低到高分配堆栈溢出: 表示的是栈区内存耗尽, 称为溢出. 例如: 每次调用递归都需要在栈区申请内存, 如果递归太深…...

计算机视觉算法——基于Transformer的目标检测(DN DETR / DINO / Sparser DETR / Lite DETR)

计算机视觉算法——基于Transformer的目标检测&#xff08;DN DETR / DINO&#xff09; 计算机视觉算法——基于Transformer的目标检测&#xff08;DN DETR / DINO&#xff09;1. DN DETR1.1 Stablize Hungarian Matching1.2 Denoising1.3 Attention Mask 2. DINO2.1 Contrasti…...

Spark---基于Yarn模式提交任务

Yarn模式两种提交任务方式 一、yarn-client提交任务方式 1、提交命令 ./spark-submit --master yarn --class org.apache.spark.examples.SparkPi ../examples/jars/spark-examples_2.11-2.3.1.jar 100 或者 ./spark-submit --master yarn–client --class org.apache.s…...

SpringCloud之Gateway(统一网关)

文章目录 前言一、搭建网关服务1、导入依赖2、在application.yml中写配置 二、路由断言工厂Route Predicate Factory三、路由过滤器 GatewayFilter案例1给所有进入userservice的请求添加一个请求头总结 四、全局过滤器 GlobalFilter定义全局过滤器&#xff0c;拦截并判断用户身…...

案例029:基于微信小程序的阅读网站设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…...

27. Spring源码篇之SpEL表达式之自定义解析模版

简介 其实前面文章我们已经介绍过了如何定义spring表达式的解析模版&#xff0c;但是那是直接使用表达式api的形式&#xff0c;对于使用spring的同学来说&#xff0c;更优雅的方式就是可以自定义一个扩展去修改 本文就是介绍如何通过Spring的扩展点修改表达式解析模版 自定义…...

100天精通Python(可视化篇)——第109天:Pyecharts绘制各种常用地图(参数说明+代码实战)

文章目录 专栏导读一、地图应用场景二、参数说明1. 导包2. add函数 三、地图绘制实战1. 省市地图2. 中国地图3. 中国地图&#xff08;带城市&#xff09;4. 中国地图&#xff08;分段型&#xff09;5. 中国地图&#xff08;连续型&#xff09;6. 世界地图7. 行程轨迹地图8. 人口…...

bugku 渗透测试

场景1 查看源代码 场景2 用dirsearch扫描一下看看 ok看到登录的照应了第一个提示 进去看看 不出所料 随便试试admin/admin进去了 在基本设置里面看到falg 场景3 确实是没啥想法了 找到php在线运行 检查网络&#xff0c;我们发现这个php在线运行会写入文件 那我们是不是写…...

WordPress用sql命令批量删除所有文章

有时我们需要将一个网站搬迁到另一个服务器。我们只想保留网站的模板样式&#xff0c;而不需要文章内容。一般情况下我们可以在后台删除已发表的文章&#xff0c;但如果有很多文章&#xff0c;我们则需要一次删除所有文章。 WordPress如何批量删除所有文章 进入网站空间后台&a…...

树状数组 / pbds解法 E2. Array Optimization by Deque

Problem - 1579E2 - Codeforces Array Optimization by Deque - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 树状数组解法 将 a i a_i ai​插入到队头&#xff0c;贡献为&#xff1a;原队列中所有比 a i a_i ai​小的数的数量将 a i a_i ai​插入到队尾&#xff0c;贡献为&a…...

原神「神铸赋形」活动祈愿现已开启

亲爱的旅行者&#xff0c;「神铸赋形」活动祈愿现已开启&#xff0c;「单手剑静水流涌之辉」「法器碧落之珑」概率UP&#xff01; 活动期间&#xff0c;旅行者可以在「神铸赋形」活动祈愿中获得更多武器与角色&#xff0c;提升队伍的战斗力&#xff01; 〓祈愿时间〓 4.2版本更…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...

深入理解 React 样式方案

React 的样式方案较多,在应用开发初期,开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有: 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中,均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观,适合动态样式和…...

Android屏幕刷新率与FPS(Frames Per Second) 120hz

Android屏幕刷新率与FPS(Frames Per Second) 120hz 屏幕刷新率是屏幕每秒钟刷新显示内容的次数&#xff0c;单位是赫兹&#xff08;Hz&#xff09;。 60Hz 屏幕&#xff1a;每秒刷新 60 次&#xff0c;每次刷新间隔约 16.67ms 90Hz 屏幕&#xff1a;每秒刷新 90 次&#xff0c;…...