vue router解決路由帶參數(shù)跳轉(zhuǎn)時出現(xiàn)404問題
更新時間：2024年03月10日 10:40:21 作者：小何開發(fā)
我的頁面是從一個vue頁面router跳轉(zhuǎn)到另一個vue頁面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個頁簽,但是不知道為什么有時候可以有時候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉(zhuǎn)時出現(xiàn)404問題,需要的朋友可以參考下
我的頁面是從一個vue頁面router跳轉(zhuǎn)到另一個vue頁面，并且利用windows.open() 瀏覽器重新創(chuàng)建一個頁簽。但是不知道為什么有時候可以有時候又不行，經(jīng)過反復(fù)測試與分析，最終發(fā)現(xiàn)是因為有一個參數(shù)的值里包含了小數(shù)點., 小數(shù)點是瀏覽器合法字符，不能通過encode編碼轉(zhuǎn)義，于是乎：利用windws.atob() 將json字符串轉(zhuǎn)換未base64，接收端用windows.btoa(),將base64轉(zhuǎ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));
但是，多次測試發(fā)現(xiàn)，window.atob() 參數(shù)內(nèi)存在中文會報錯。于是又一頓百度，最終完美解決
發(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)時出現(xiàn)404問題的文章就介紹到這了,更多相關(guān)vue router路由跳轉(zhuǎn)404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue配置文件vue.config.js配置前端代理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
看到好多開源項目都升級了vue3,下面這篇文章主要給大家介紹了關(guān)于Vue2項目升級到Vue3的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
使用WebStorm用Debug模式調(diào)試Vue等前端項目的步驟
WebStorm提供了更簡單的前端調(diào)試方法,記錄一下WebStorm調(diào)試步驟啟動前端項目,這篇文章主要介紹了使用WebStorm用Debug模式調(diào)試Vue等前端項目的步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-11-11
詳解Vue基于 Nuxt.js 實現(xiàn)服務(wù)端渲染（SSR）
直接使用 Vue 構(gòu)建前端單頁面應(yīng)用，頁面源碼時只有簡單的幾行 html，這并不利于網(wǎng)站的 SEO，這時候就需要服務(wù)端渲染，本篇文章主要介紹了詳解Vue基于 Nuxt.js 實現(xiàn)服務(wù)端渲染（SSR），具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了vue 指令之氣泡提示效果的實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
vue+element?DatePicker實現(xiàn)日期選擇器封裝
Vue?Element?DatePicker是一款基于Vue.js的日期選擇控件，它提供了豐富的日期選擇功能，支持日期范圍選擇、日期格式化、自定義日期格式、快捷選擇等功能，極大地提高了用戶的體驗，是開發(fā)者必備的日期選擇控件。2023-02-02
今天小編就為大家分享一篇vue2過濾器模糊查詢方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之常用模板語法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue?代碼壓縮優(yōu)化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
詳解基于 Nuxt 的 Vue.js 服務(wù)端渲染實踐
這篇文章主要介紹了詳解基于 Nuxt 的 Vue.js 服務(wù)端渲染實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10