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

小何开发2024-03-09 11:07

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

js 复制代码

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

发送端：

js 复制代码

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

接收端：

js 复制代码

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

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

js 复制代码

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

接收方：

js 复制代码

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