快捷導(dǎo)航

vue如何實(shí)現(xiàn)清空this.$route.query的值

更新時(shí)間：2022年09月23日 08:48:18 作者：who_become_gods

這篇文章主要介紹了vue如何實(shí)現(xiàn)清空this.$route.query的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

如何清空this.$route.query的值

mounted

定義一個(gè) localStorage 來判斷當(dāng)前是否是query攜帶參數(shù)進(jìn)來頁面的

//如果有當(dāng)前l(fā)ocalStorage isTest 則 清空query
?if(localStorage.getItem('isTest')){
? ? ?this.$router.push({ query: {} })
?}
//
?if(this.$route && this.$route.query && this.$route.query.id){
??? ?//定義一個(gè) localStorage isTest
? ? ?localStorage.setItem('isTest', true)
? ? ?// 這里處理攜帶進(jìn)來的參數(shù)
?}

destroyed

destroyed() {
? ?localStorage.removeItem('isTest')
}

改變this.$route.query中的數(shù)據(jù)

某些特定情況下想改變this.$route.query中的數(shù)據(jù)（就是地址欄中的參數(shù)），是不能通過直接賦值來改變的，我目前知道的一個(gè)辦法是下載webpack-merge依賴包實(shí)現(xiàn):

下載：

npm i webpack-merge

引入：

import merge from 'webpack-merge';

修改：

this.$router.push({
? ? query:merge(this.$route.query,{'id':'630'})
})

如果id本來存在的話就是修改id的值，不存在的話就會(huì)添加id這個(gè)屬性，如果想替換所有的屬性只要把’id’換成{}就可以。

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

您可能感興趣的文章:

相關(guān)文章

vue2.0的虛擬DOM渲染思路分析
vue2.0采用了虛擬DOM來代替對(duì)真實(shí)DOM的操作，最后通過某種機(jī)制來完成對(duì)真實(shí)DOM的更新，渲染視圖。這篇文章主要介紹了vue2.0的虛擬DOM渲染,需要的朋友可以參考下
2018-08-08
Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能
這篇文章主要介紹了Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
Vue項(xiàng)目打包部署的實(shí)戰(zhàn)過程記錄
我們使用nginx部署Vue項(xiàng)目,實(shí)質(zhì)上就是將Vue項(xiàng)目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包部署的相關(guān)資料,需要的朋友可以參考下
2021-09-09
vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒加載,需要的朋友可以參考下
2018-08-08
vue 按鈕權(quán)限控制介紹
這篇文章主要介紹了vue 按鈕權(quán)限控制，在日常項(xiàng)目中，會(huì)碰到需要根據(jù)后臺(tái)接口返回的數(shù)據(jù)，來判斷當(dāng)前用戶的操作權(quán)限，必須當(dāng)有刪除權(quán)限時(shí)，就顯示刪除按鈕，下面我們就來了解一下具體的解決方法,需要的朋友也可以參考一下
2021-12-12
VUE實(shí)現(xiàn)注冊(cè)與登錄效果
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)注冊(cè)與登錄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue實(shí)現(xiàn)拍照或錄像的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)拍照或錄像的功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-11-11
vue+jsplumb實(shí)現(xiàn)連線繪圖
這篇文章主要為大家詳細(xì)介紹了vue+jsplumb實(shí)現(xiàn)連線繪圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue filter 過濾器、以及在table中的使用介紹
這篇文章主要介紹了Vue filter 過濾器、以及在table中的使用介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue項(xiàng)目打包部署到iis服務(wù)器的配置方法
這篇文章主要介紹了Vue項(xiàng)目打包部署到iis服務(wù)器的配置方法，文中通過代碼示例給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-10-10