欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue路由跳轉(zhuǎn)傳參后無法清空地址欄參數(shù)問題解決方案

 更新時間：2025年05月21日 10:03:01   作者：嶼東  
這篇文章主要介紹了Vue路由跳轉(zhuǎn)傳參后無法清空地址欄參數(shù)問題解決方案,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

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)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue+element項目中過濾輸入框特殊字符小結(jié)

    vue+element項目中過濾輸入框特殊字符小結(jié)

    這篇文章主要介紹了vue+element項目中過濾輸入框特殊字符小結(jié)，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • Vue3?echarts組件化及使用hook進行resize方式

    Vue3?echarts組件化及使用hook進行resize方式

    這篇文章主要介紹了Vue3?echarts組件化及使用hook進行resize方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • nuxt.js框架使用小結(jié)

    nuxt.js框架使用小結(jié)

    本文主要介紹了nuxt.js框架使用小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-08-08
  • keep-Alive搭配vue-router實現(xiàn)緩存頁面效果的示例代碼

    keep-Alive搭配vue-router實現(xiàn)緩存頁面效果的示例代碼

    這篇文章主要介紹了keep-Alive搭配vue-router實現(xiàn)緩存頁面效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-06-06
  • vue cli 3.0通用打包配置代碼,不分一二級目錄

    vue cli 3.0通用打包配置代碼,不分一二級目錄

    這篇文章主要介紹了vue cli 3.0通用打包配置代碼,不分一二級目錄，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue+Typescript中在Vue上掛載axios使用時報錯問題

    Vue+Typescript中在Vue上掛載axios使用時報錯問題

    這篇文章主要介紹了Vue+Typescript中在Vue上掛載axios使用時報錯問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-08-08
  • Vue3響應(yīng)式高階用法之toRaw()的使用

    Vue3響應(yīng)式高階用法之toRaw()的使用

    在Vue3中,toRaw方法允許用戶獲取響應(yīng)式對象的原始值,有助于性能優(yōu)化和與外部庫集成,它通過繞過Vue的響應(yīng)式系統(tǒng),僅在必要時觸發(fā)更新,從而提升效率,本文就來具體介紹一下,感興趣的可以了解一下
    2024-09-09
  • Vuex中的getter和mutation的區(qū)別詳解

    Vuex中的getter和mutation的區(qū)別詳解

    在現(xiàn)代前端開發(fā)中,狀態(tài)管理是一個不可忽視的話題,而Vuex作為Vue.js的官方狀態(tài)管理庫,在大型應(yīng)用中扮演著至關(guān)重要的角色,當(dāng)我們使用Vuex進行狀態(tài)管理時,getter和mutation是兩個重要的概念,在本文中,我們將詳細(xì)探討getter和mutation的區(qū)別,需要的朋友可以參考下
    2024-12-12
  • 簡單聊聊Vue中的計算屬性和屬性偵聽

    簡單聊聊Vue中的計算屬性和屬性偵聽

    計算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯,vue提供了檢測數(shù)據(jù)變化的一個屬性watch可以通過newVal獲取變化之后的值,這篇文章主要給大家介紹了關(guān)于Vue中計算屬性和屬性偵聽的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • Vue拖動截圖功能的簡單實現(xiàn)方法

    Vue拖動截圖功能的簡單實現(xiàn)方法

    最近項目上要做一個車牌識別的功能,就需要做拖動截圖功能了,因為前段是vue,所以下面這篇文章主要給大家介紹了關(guān)于Vue拖動截圖功能的簡單實現(xiàn)方法,需要的朋友可以參考下
    2021-07-07

最新評論