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'}));
		}
	}),
	'_blank'
)

接收端:

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': '张三'})));
		}
	}),
	'_blank'
)

接收方:

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

最近更新

  1. TCP协议是安全的吗?

    2024-03-11 23:34:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-11 23:34:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-11 23:34:06       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-11 23:34:06       20 阅读

热门阅读

  1. LeetCode 0299.猜数字游戏:计数

    2024-03-11 23:34:06       25 阅读
  2. IOS面试题object-c 61-70

    2024-03-11 23:34:06       21 阅读
  3. 机器学习概述

    2024-03-11 23:34:06       17 阅读
  4. 人工智能研究的各个学派

    2024-03-11 23:34:06       30 阅读
  5. NetOps-Python实现批量网络设备配置信息的下载

    2024-03-11 23:34:06       21 阅读