快捷導(dǎo)航

vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問(wèn)題

更新時(shí)間：2024年03月10日 10:40:21 作者：小何開(kāi)發(fā)

我的頁(yè)面是從一個(gè)vue頁(yè)面router跳轉(zhuǎn)到另一個(gè)vue頁(yè)面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個(gè)頁(yè)簽,但是不知道為什么有時(shí)候可以有時(shí)候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問(wèn)題,需要的朋友可以參考下

我的頁(yè)面是從一個(gè)vue頁(yè)面router跳轉(zhuǎn)到另一個(gè)vue頁(yè)面，并且利用windows.open() 瀏覽器重新創(chuàng)建一個(gè)頁(yè)簽。但是不知道為什么有時(shí)候可以有時(shí)候又不行，經(jīng)過(guò)反復(fù)測(cè)試與分析，最終發(fā)現(xiàn)是因?yàn)橛幸粋€(gè)參數(shù)的值里包含了小數(shù)點(diǎn)., 小數(shù)點(diǎn)是瀏覽器合法字符，不能通過(guò)encode編碼轉(zhuǎn)義，于是乎：利用windws.atob() 將json字符串轉(zhuǎn)換未base64，接收端用windows.btoa(),將base64轉(zhuǎn)義過(guò)來(lái)。問(wèn)題得以解決。

路由定義

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

發(fā)送端：

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));

但是，多次測(cè)試發(fā)現(xiàn)，window.atob() 參數(shù)內(nèi)存在中文會(huì)報(bào)錯(cuò)。于是又一頓百度，最終完美解決

發(fā)送方：

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)));

到此這篇關(guān)于vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問(wèn)題的文章就介紹到這了,更多相關(guān)vue router路由跳轉(zhuǎn)404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue配置文件vue.config.js配置前端代理方式
這篇文章主要介紹了Vue配置文件vue.config.js配置前端代理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue2項(xiàng)目升級(jí)到Vue3的詳細(xì)教程
看到好多開(kāi)源項(xiàng)目都升級(jí)了vue3,下面這篇文章主要給大家介紹了關(guān)于Vue2項(xiàng)目升級(jí)到Vue3的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
使用WebStorm用Debug模式調(diào)試Vue等前端項(xiàng)目的步驟
WebStorm提供了更簡(jiǎn)單的前端調(diào)試方法,記錄一下WebStorm調(diào)試步驟啟動(dòng)前端項(xiàng)目,這篇文章主要介紹了使用WebStorm用Debug模式調(diào)試Vue等前端項(xiàng)目的步驟,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2024-11-11
詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染（SSR）
直接使用 Vue 構(gòu)建前端單頁(yè)面應(yīng)用，頁(yè)面源碼時(shí)只有簡(jiǎn)單的幾行 html，這并不利于網(wǎng)站的 SEO，這時(shí)候就需要服務(wù)端渲染，本篇文章主要介紹了詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染（SSR），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-04-04
vue 指令之氣泡提示效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 指令之氣泡提示效果的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-10-10
vue+element?DatePicker實(shí)現(xiàn)日期選擇器封裝
Vue?Element?DatePicker是一款基于Vue.js的日期選擇控件，它提供了豐富的日期選擇功能，支持日期范圍選擇、日期格式化、自定義日期格式、快捷選擇等功能，極大地提高了用戶的體驗(yàn)，是開(kāi)發(fā)者必備的日期選擇控件。
2023-02-02
vue2過(guò)濾器模糊查詢方法
今天小編就為大家分享一篇vue2過(guò)濾器模糊查詢方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue.js學(xué)習(xí)筆記之常用模板語(yǔ)法詳解
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之常用模板語(yǔ)法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
vue?代碼壓縮優(yōu)化方式
這篇文章主要介紹了vue?代碼壓縮優(yōu)化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
詳解基于 Nuxt 的 Vue.js 服務(wù)端渲染實(shí)踐
這篇文章主要介紹了詳解基于 Nuxt 的 Vue.js 服務(wù)端渲染實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10