Vue路由跳轉(zhuǎn)傳參后無法清空地址欄參數(shù)問題解決方案
Vue路由跳轉(zhuǎn)傳參后無法清空地址欄參數(shù)問題解決
使用的路由模式是history，通過以下方式進行跳轉(zhuǎn)傳參
proxy.$router.push({ path: '/performance/index', query: { name: '小明', id: '1'} })這樣跳轉(zhuǎn)后路由和地址欄將變成 /performance/index?name=小明&id=1
因為頁面有用到路由參數(shù)，但是這樣刷新的話，參數(shù)會一直攜帶在路由上，就會刷新了頁面還會處理這些參數(shù)。
剛開始，通過proxy.$route.quey = {} ，proxy.$route.quey = null，proxy.$router.push({ path: '/performance/index'})方法嘗試過，路由參數(shù)確實沒了，但是地址欄上還是會攜帶參數(shù)，最后通過網(wǎng)上查閱找到了解決辦法：
const path = proxy.$route.path proxy.$router.push(path)
補充：vue使用路由的query配置項時如何清除地址欄的參數(shù)
vue使用路由的query配置項時如何清除地址欄的參數(shù)
寫vue項目時，如果想通過路由的query配置項把參數(shù)從一個組件傳到另一個組件，但是又不希望?id=xxx顯示在地址欄（如：http://localhost:8080/test?id=xxx的?id=xxx），該怎么做：
舉一個案例：
把Movies.vue的hello參數(shù)傳到Cinemas.vue
在Movies.vue寫：
this.$router.push({
name: 'cinemas',
query: {
hello: 'vue'
}
})在Cinemas.vue寫：
解決方案一：清空query的值
created() {
console.log("this.$route--->", this.$route);
// 方式一：清空query的值
this.$router.push({ query: {} });
}解決方案二：跳轉(zhuǎn)路由時不帶query參數(shù)
created() {
console.log("this.$route--->", this.$route);
// 方式二：跳轉(zhuǎn)路由時不帶query參數(shù)
this.$router.push(this.$route.path);
}最終頁面效果如下所示。可以看到，路徑?jīng)]有顯示成http://localhost:8080/cinemas?hello=vue，而是顯示成http://localhost:8080/cinemas，這就是我們要的效果。
到此這篇關(guān)于Vue路由跳轉(zhuǎn)傳參后無法清空地址欄參數(shù)問題解決的文章就介紹到這了,更多相關(guān)Vue路由跳轉(zhuǎn)傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue項目三級聯(lián)動路由跳轉(zhuǎn)與傳參的思路詳解
- Vue2路由跳轉(zhuǎn)傳參中文問題處理方案
- uniapp+vue3路由跳轉(zhuǎn)傳參的實現(xiàn)
- Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
- vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法
- vue3路由配置以及路由跳轉(zhuǎn)傳參詳解
- vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的方法
- Vue路由跳轉(zhuǎn)傳參或者打開新頁面跳轉(zhuǎn)問題
- vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)
- vue路由跳轉(zhuǎn)傳參數(shù)的方法
相關(guān)文章
vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式(總結(jié))
這篇文章主要介紹了vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
jenkins自動構(gòu)建發(fā)布vue項目的方法步驟
這篇文章主要介紹了jenkins自動構(gòu)建發(fā)布vue項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了vue mixins合并策略以及應用場景,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue配置啟動項目自動打開瀏覽器方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中實現(xiàn)點擊變成全屏及縮放功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
element input輸入框自動獲取焦點的實現(xiàn)
本文主要介紹了element input輸入框自動獲取焦點的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Vue路由vue-router詳細講解指南，對vue-router感興趣的同學，可以參考下2021-04-04
這篇文章主要介紹了使用vue導出excel遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)
這篇文章主要介紹了Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue3 表單搜索內(nèi)容回顯到地址欄的實例代碼,地址欄輸入內(nèi)容回顯到form表單,同理表單輸入內(nèi)容也要回顯到地址欄中,本文結(jié)合實例代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09