vue清除地址欄路由參數(shù)方式

更新時(shí)間：2023年01月21日 08:12:56 作者：lihefei_coder

這篇文章主要介紹了vue清除地址欄路由參數(shù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue清除地址欄路由參數(shù)

方式一：

let path = this.$route.path; //先獲取路由路徑
this.$router.push(path); //再跳轉(zhuǎn)路由路徑，query參數(shù)沒帶過去，所以被清除了

方式二：

this.$router.push({ query: {} });

vue刪除query中個(gè)別參數(shù)或清除query

在寫項(xiàng)目過程中涉及到一個(gè)需求，大概形容一下就是第一次進(jìn)入會有一個(gè)編輯彈窗，如果點(diǎn)擊編輯彈窗的保存按鈕后，刷新頁面，彈窗則不在彈出。

假設(shè)添有一個(gè) type為open的參數(shù)

let resolves = this.$router.resolve({
? name: 'OrdersDetail',
? query: {
? ? orderId: this.orderId,
? ? channel: this.salesChannel,
? ? type: 'open' // 目標(biāo)參數(shù)
? }
})
window.open(resolves.href, '_blank')

刪除type參數(shù)

let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 先拷貝一個(gè)一模一樣的對象
delete newQuery.type //再刪除page
this.$router.replace({ query: newQuery }) //再把新的替換了

刪除全部query參數(shù)

let path = this.$route.path //先獲取路由路徑
this.$router.replace(path) //再跳轉(zhuǎn)路由路徑，query參數(shù)沒帶過去，所以被清除了

或者

this.$router.replace({ query: {} });

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用vue中的v-for遍歷二維數(shù)組的方法
下面小編就為大家分享一篇使用vue中的v-for遍歷二維數(shù)組的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue實(shí)現(xiàn)自定義el-table穿梭框功能
這篇文章主要介紹了vue實(shí)現(xiàn)自定義el-table穿梭框功能,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue使用Element-UI部分組件適配移動(dòng)端問題
這篇文章主要介紹了vue使用Element-UI部分組件適配移動(dòng)端問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue之Axios的異步請求問題詳解
總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路，Axios是一個(gè)開源的可以用在瀏覽器端和Node JS的異步通信框架，主要作用就是實(shí)現(xiàn)AJAX異步通信
2023-02-02
vite項(xiàng)目如何集成eslint和prettier
這篇文章主要介紹了vite項(xiàng)目如何集成eslint和prettier問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
Vue?3?中動(dòng)態(tài)賦值?ref?的應(yīng)用示例解析
Vue3引入了Composition?API,其中ref是核心概念,允許開發(fā)者聲明響應(yīng)式狀態(tài),本文通過一個(gè)具體示例,探討了在Vue3中如何使用ref進(jìn)行動(dòng)態(tài)賦值,尤其是在處理DOM相關(guān)操作時(shí)的應(yīng)用,通過ref動(dòng)態(tài)賦值,可以有效管理組件內(nèi)的狀態(tài),提高代碼的可維護(hù)性和清晰度
2024-09-09
Vuex和前端緩存的整合策略詳解
這篇文章主要給大家介紹了Vuex和前端緩存的整合策略的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編一起來看看吧。
2017-05-05
Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-05-05
vue中的v-if和v-show的區(qū)別詳解
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
基于Vue實(shí)現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出
這篇文章主要為大家介紹了三種方法，可以實(shí)現(xiàn)將HTML頁面轉(zhuǎn)為PDF并實(shí)現(xiàn)下載。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下
2022-04-04