如何通過URL來實現(xiàn)在Vue中存儲業(yè)務(wù)狀態(tài)實用技巧
如何通過URL來實現(xiàn)在Vue中存儲狀態(tài)
通常情況下，我們會通過 Vue 提供的 ref() , reactive() 甚至是 computed 來存儲狀態(tài)。
但，其實還有另一種不太容易的方法來存儲狀態(tài)，那就是通過 URL 的 查詢參數(shù).
那么本文就通過一些 示例代碼，來講清楚如何通過 URL 來實現(xiàn)在Vue中存儲狀態(tài)。
Code
Vue Router 的 Push
要在 Vue 應(yīng)用程序中使用查詢參數(shù)，最簡單的方法是使用 Vue Router 的 Push 方法：
import { useRouter } from 'vue-router';
const { push } = useRouter();在某些交互后（例如： 點擊按鈕）， 可以在應(yīng)用程序中使用此路由器方法，將狀態(tài)保存到 URL 查詢參數(shù)：
const saveUserNameToQuery = (name: string) => {
push({
query: {
username: name,
},
});
}當(dāng)URL 中有很多參數(shù)，僅改變其中某個參數(shù)時， 你可以 這樣做：
const { currentRoute, push } = useRouter();
const updateQueryState = (parameter: string, value: string) => {
push({
query: {
...currentRoute.value.query,
[parameter]: value,
},
});
}當(dāng)我們做了很多操作要重置時， 可以通過如下代碼實現(xiàn)：
const resetQuery = () => {
push({
query: {},
});
}當(dāng)然，我們可以通過Vue Router 來做更多的事情。 但我今天展示的這些，就是我最近做項目遇到的一些小技巧。
總結(jié)
您已成功學(xué)習(xí)如何使用 Vue Router 輕松修改 URL 狀態(tài)并更新查詢參數(shù)。這是一個非常有用的功能，我每天都在使用，強烈建議您嘗試:)
以上就是Vue Tips 如何用 URL 存儲業(yè)務(wù)狀態(tài)的詳細(xì)內(nèi)容，更多關(guān)于Vue URL存儲業(yè)務(wù)狀態(tài)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue 請求傳公共參數(shù)的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了vue+axios實現(xiàn)post文件下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Vue輸入框?qū)崟r驗證IP地址合法性并在下方進(jìn)行提示功能實現(xiàn)
在Vue組件中的IP地址輸入框定義一個checkIpAddress方法,該方法使用正則表達(dá)式對傳入的IP地址進(jìn)行驗證,這篇文章主要介紹了Vue輸入框?qū)崟r驗證IP地址合法性并在下方進(jìn)行提示,需要的朋友可以參考下2024-06-06
vue 項目打包通過命令修改 vue-router 模式 修改 API 接口前綴
這篇文章主要介紹了vue 項目打包通過命令修改 vue-router 模式 修改 API 接口前綴的相關(guān)知識，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
路由守衛(wèi)又稱導(dǎo)航守衛(wèi)，指是路由跳轉(zhuǎn)前、中、后過程中的一些鉤子函數(shù),這篇文章主要介紹了Vue中的路由與多種守衛(wèi),需要的朋友可以參考下2023-02-02
element el-input directive數(shù)字進(jìn)行控制
本文介紹了vue使用directive 進(jìn)行控制的方法，使用element開發(fā)的過程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字，并且有不要小數(shù)點，有需要小數(shù)點的，就有一定的參考價值，有興趣的可以了解一下2018-10-10
vue中使用refs定位dom出現(xiàn)undefined的解決方法
本篇文章主要介紹了vue中使用refs定位dom出現(xiàn)undefined的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
如何使用Webstorm和Chrome來調(diào)試Vue項目
這篇文章主要介紹了如何使用Webstorm和Chrome來調(diào)試Vue項目，對Vue感興趣的同學(xué)，一定要看一下2021-05-05
這篇文章主要介紹了vue利用axios來完成數(shù)據(jù)的交互,本文通過實例代碼給大家講解數(shù)據(jù)交互方法及安裝方法,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了webpack4打包vue前端多頁面項目的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09