Vue路由跳轉傳參后無法清空地址欄參數問題解決方案
Vue路由跳轉傳參后無法清空地址欄參數問題解決
使用的路由模式是history，通過以下方式進行跳轉傳參
proxy.$router.push({ path: '/performance/index', query: { name: '小明', id: '1'} })這樣跳轉后路由和地址欄將變成 /performance/index?name=小明&id=1
因為頁面有用到路由參數，但是這樣刷新的話，參數會一直攜帶在路由上，就會刷新了頁面還會處理這些參數。
剛開始，通過proxy.$route.quey = {} ，proxy.$route.quey = null，proxy.$router.push({ path: '/performance/index'})方法嘗試過，路由參數確實沒了，但是地址欄上還是會攜帶參數，最后通過網上查閱找到了解決辦法：
const path = proxy.$route.path proxy.$router.push(path)
補充：vue使用路由的query配置項時如何清除地址欄的參數
vue使用路由的query配置項時如何清除地址欄的參數
寫vue項目時，如果想通過路由的query配置項把參數從一個組件傳到另一個組件，但是又不希望?id=xxx顯示在地址欄（如：http://localhost:8080/test?id=xxx的?id=xxx），該怎么做：
舉一個案例：
把Movies.vue的hello參數傳到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: {} });
}解決方案二：跳轉路由時不帶query參數
created() {
console.log("this.$route--->", this.$route);
// 方式二：跳轉路由時不帶query參數
this.$router.push(this.$route.path);
}最終頁面效果如下所示?？梢钥吹剑窂經]有顯示成http://localhost:8080/cinemas?hello=vue，而是顯示成http://localhost:8080/cinemas，這就是我們要的效果。
到此這篇關于Vue路由跳轉傳參后無法清空地址欄參數問題解決的文章就介紹到這了,更多相關Vue路由跳轉傳參內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue+element項目中過濾輸入框特殊字符小結，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Vue3?echarts組件化及使用hook進行resize方式
這篇文章主要介紹了Vue3?echarts組件化及使用hook進行resize方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文主要介紹了nuxt.js框架使用小結,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08
keep-Alive搭配vue-router實現緩存頁面效果的示例代碼
這篇文章主要介紹了keep-Alive搭配vue-router實現緩存頁面效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue cli 3.0通用打包配置代碼,不分一二級目錄，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue+Typescript中在Vue上掛載axios使用時報錯問題
這篇文章主要介紹了Vue+Typescript中在Vue上掛載axios使用時報錯問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-08-08
在Vue3中,toRaw方法允許用戶獲取響應式對象的原始值,有助于性能優(yōu)化和與外部庫集成,它通過繞過Vue的響應式系統(tǒng),僅在必要時觸發(fā)更新,從而提升效率,本文就來具體介紹一下,感興趣的可以了解一下2024-09-09
Vuex中的getter和mutation的區(qū)別詳解
在現代前端開發(fā)中,狀態(tài)管理是一個不可忽視的話題,而Vuex作為Vue.js的官方狀態(tài)管理庫,在大型應用中扮演著至關重要的角色,當我們使用Vuex進行狀態(tài)管理時,getter和mutation是兩個重要的概念,在本文中,我們將詳細探討getter和mutation的區(qū)別,需要的朋友可以參考下2024-12-12
計算屬性用于處理復雜的業(yè)務邏輯,vue提供了檢測數據變化的一個屬性watch可以通過newVal獲取變化之后的值,這篇文章主要給大家介紹了關于Vue中計算屬性和屬性偵聽的相關資料,需要的朋友可以參考下2021-10-10
最近項目上要做一個車牌識別的功能,就需要做拖動截圖功能了,因為前段是vue,所以下面這篇文章主要給大家介紹了關于Vue拖動截圖功能的簡單實現方法,需要的朋友可以參考下2021-07-07