vue router 解决路由带参数跳转时出现404问题

在这里插入图片描述
我的页面是从一个vue页面router跳转到另一个vue页面,并且利用windows.open() 浏览器重新创建一个页签。但是不知道为什么有时候可以有时候又不行,经过反复测试与分析,最终发现是因为有一个参数的值里包含了小数点., 小数点是浏览器合法字符,不能通过encode编码转义,于是乎:利用windws.atob() 将json字符串转换未base64,接收端用windows.btoa(),将base64转义过来。问题得以解决。
路由定义

{path: '/xxx/indexDetail:data',name: 'indexDetail',component: ()=> import('@/views/xxdx/indexDetail.vue'),meta: { title: 'xxx', requiresAuth: true}
}

发送端:

import {useRouter} form 'vue-router'
const router = useRouter();
window.open(router.resolve({name: 'indexDetail',params:{data: window.btoa(JSON.stringify({'aaa': '1231.12'}));}})
)

接收端:

import {useRoute} form 'vue-router'
const route = useRoute();
params = window.atob(String(route.params.data));

但是,多次测试发现,window.atob() 参数内存在中文会报错。于是又一顿百度,最终完美解决
发送方:

import {useRouter} form 'vue-router'
const router = useRouter();
window.open(router.resolve({name: 'indexDetail',params:{data:window.btoa(encodeURIComponent(JSON.stringify({'aaa': '1231.12','bbb': '张三'})));}})
)

接收方:

import {useRoute} form 'vue-router'
const route = useRoute();
params = decodeURIComponent(window.atob(String(router.params.data)));

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

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

相关文章

Pytest测试中的临时目录与文件管理!

在Pytest测试框架中,使用临时目录与文件是一种有效的测试管理方式,它能够确保测试的独立性和可重复性。在本文中,我们将深入探讨如何在Pytest中利用临时目录与文件进行测试,并通过案例演示实际应用。 为什么需要临时目录与文件&a…

#KEIL使用

关于在调试时,有些局部变量值无法在窗口中查看报错“not in scope",是被优化掉了,降低优化等级即可。 参考博客: KeilMDK 开发过程中遇到一些奇怪问题记录_keil遇到了不正当的冲突-CSDN博客

全国保护性耕作/常规耕作农田分类数据集

基于Sentinel-2遥感产品,使用来自文献调研和目视解译产生的保护性/常规耕作样本点,通过交叉验证方法训练随机森林分类器,生成了2016-2020年全国保护性耕作/常规耕作农田分类数据集。分类代码:0值代表非农田,1值表示第一…

“轻松入门Electron:一步步构建梦想中的桌面软件

在数字化的浪潮中,桌面应用依旧占据着其独特而重要的位置,不论是在企业解决方案、专业工具软件还是个性化应用领域中都是如此。随着技术的演进,创建这些应用的过程已经变得更为简单和可行,尤其是随着Electron等框架的出现。Electr…

【异常处理】sbt构建Chisel库时出现extracting structure failed:build status:error的解决办法

文章目录 报错背景:解决思路:①IDEA中配置本地的SBT进行下载②更改下载源为华为的镜像站1. 修改sbtconfig.txt2. 增加repositories文件 ③查看报错信息 总结整理的Scala-Chisel-Chiseltest版本信息对应表 报错背景: 最近在写Chisel时&#x…

K8s-MySQL主从集群

K8s-MySQL主从集群 引言 该案例代码均可从https://github.com/WeiXiao-Hyy/k8s_example 获取,欢迎Star! 需求 一个“主从复制”的MySQL集群有一个主节点Master有多个从节点Slave从节点需要能水平扩展所以写操作只能在主节点上执行读操作可以在所有节点…

Navicat Premium:掌控数据库的强大工具

在当今数字化的时代,数据管理变得越来越重要。无论您是数据库管理员、开发人员还是普通用户,找到一个高效、易用的数据库管理工具是至关重要的。Navicat Premium for Mac/Win 就是这样一款强大的多协议数据库管理工具,它将为您的数据库管理体…

HPE ProLiant MicroServer Gen8 RAID 1 扩容、故障恢复探索

声明:本探索只针对HP Microserver Gen8 Smart Array B120i板载阵列卡组建RAID 1(不是RAID 10),不同阵列卡结果可能会不同,请谨慎操作,本人不对你操作后导致的任何数据丢失或者损失承担任何责任,…

Java SE入门及基础(29)

第三节 访问修饰符 1. 概念 访问修饰符就是控制访问权限的修饰符号 2. 类的访问修饰符 类的访问修饰符只有两种:public 修饰符和默认修饰符(不写修饰符就是默认) public 修饰符修饰类表示类可以公开访问。默认修饰符修饰类表示该类只能…

融资项目——网关微服务

1. 网关的路由转发功能 在前后端分离的项目中&#xff0c;网关服务可以将前端的相关请求转发到相应的后端微服务中。 2. 网关微服务的配置 首先需要创建一个网关微服务&#xff0c;并添加依赖。 <!-- 网关 --><dependency><groupId>org.springframework.cl…

FreeRTOS学习笔记-基于stm32(3)中断管理

一、什么是中断 通俗点讲就是让CPU停止当前在做的事&#xff0c;转而去做更紧急的事。 二、中断优先级分组 这个紧急的事也有一个等级之分&#xff0c;优先级越高越先执行。stm32使用中断优先配置寄存器的高4位&#xff0c;共16级的中断优先等级。 stm32的中断优先等级可以分为…

让开源浏览器Chromium正常显示中文

什么是 Chromium &#xff1f; Chromium 是一个开源浏览器项目&#xff0c;旨在为所有用户构建一种更安全、更快、更稳定的网络体验方式。 和老苏之前介绍的 Firefox 的作用是一样的 文章传送门&#xff1a;给群晖安装firefox浏览器 因为是基于 vnc 的应用&#xff0c;感觉资源…

Elasticsearch 通过索引阻塞实现数据保护深入解析

Elasticsearch 是一种强大的搜索和分析引擎&#xff0c;被广泛用于各种应用中&#xff0c;以其强大的全文搜索能力而著称。 不过&#xff0c;在日常管理 Elasticsearch 时&#xff0c;我们经常需要对索引进行保护&#xff0c;以防止数据被意外修改或删除&#xff0c;特别是在进…

动态规划 第一期 背包问题

前言 动态规划难度较高&#xff0c;但是也十分重要&#xff0c;希望大家能够好好的理解&#xff01;&#xff01;&#xff01; 一、背包问题 思维导图&#xff1a; 背包问题(Knapsack problem)是一种组合优化的NP完全问题。问题可以描述为&#xff1a;给定一组物品&#xff…

实现QT中qDebug()的日志重定向

背景&#xff1a; 在项目开发过程中&#xff0c;为了方便分析和排查问题&#xff0c;我们需要将原本输出到控制台的调试信息写入日志文件&#xff0c;进行持久化存储&#xff0c;还可以实现日志分级等。 日志输出格式&#xff1a; 我们需要的格式包括以下内容&#xff1a; 1.…

MySQL死锁详细介绍

首先死锁产生的原因&#xff1a;两个及以上事务争夺资源导致互相等待造成的 比如事务A先修改id为1的数据再去修改id为2的数据&#xff0c;事务B先修改id为2的数据再去修改id为1的数据&#xff0c;因为事务A先拿到id1的锁再去拿id2的锁&#xff0c;而事务B先拿到id2的锁又去拿id…

“成像光谱遥感技术中的AI革命:ChatGPT应用指

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力。本文重点介绍ChatGPT在遥感中的应用&#xff0c;人工智能…

【Algorithms 4】算法(第4版)学习笔记 16 - 4.2 有向图

文章目录 前言参考目录学习笔记1&#xff1a;介绍1.1&#xff1a;有向图简介1.2&#xff1a;应用举例1.3&#xff1a;相关问题2&#xff1a;有向图 API2.1&#xff1a;有向图表示2.1.1&#xff1a;邻接表数组 Adjacency-list2.1.2&#xff1a;Java 实现&#xff1a;邻接表数组2…

Sftp服务器搭建(linux)

Sftp服务器搭建&#xff08;linux&#xff09; 一、基本工作原理 FTP的基本工作原理如下&#xff1a; 1&#xff09;建立连接&#xff1a;客户端与服务器之间通过TCP/IP建立连接。默认情况下&#xff0c;FTP使用端口号21作为控制连接的端口。​​​​​​​ 2&#xff09;身…

基于AI软件平台 HEGERLS智能托盘四向车机器人物流仓储解决方案持续升级

随着各大中小型企业对仓储需求的日趋复杂&#xff0c;柔性、离散的物流子系统也不断涌现&#xff0c;各种多类型的智能移动机器人、自动化仓储装备大量陆续的应用于物流行业中&#xff0c;但仅仅依靠传统的物流技术和单点的智能化设备&#xff0c;已经无法更有效的应对这些挑战…