如何通過URL來實(shí)現(xiàn)在Vue中存儲業(yè)務(wù)狀態(tài)實(shí)用技巧
如何通過URL來實(shí)現(xiàn)在Vue中存儲狀態(tài)
通常情況下，我們會(huì)通過 Vue 提供的 ref() , reactive() 甚至是 computed 來存儲狀態(tài)。
但，其實(shí)還有另一種不太容易的方法來存儲狀態(tài)，那就是通過 URL 的 查詢參數(shù).
那么本文就通過一些 示例代碼，來講清楚如何通過 URL 來實(shí)現(xiàn)在Vue中存儲狀態(tài)。
Code
Vue Router 的 Push
要在 Vue 應(yīng)用程序中使用查詢參數(shù)，最簡單的方法是使用 Vue Router 的 Push 方法：
import { useRouter } from 'vue-router';
const { push } = useRouter();在某些交互后（例如： 點(diǎn)擊按鈕）， 可以在應(yīng)用程序中使用此路由器方法，將狀態(tài)保存到 URL 查詢參數(shù)：
const saveUserNameToQuery = (name: string) => {
push({
query: {
username: name,
},
});
}當(dāng)URL 中有很多參數(shù)，僅改變其中某個(gè)參數(shù)時(shí)， 你可以 這樣做：
const { currentRoute, push } = useRouter();
const updateQueryState = (parameter: string, value: string) => {
push({
query: {
...currentRoute.value.query,
[parameter]: value,
},
});
}當(dāng)我們做了很多操作要重置時(shí)， 可以通過如下代碼實(shí)現(xiàn)：
const resetQuery = () => {
push({
query: {},
});
}當(dāng)然，我們可以通過Vue Router 來做更多的事情。 但我今天展示的這些，就是我最近做項(xiàng)目遇到的一些小技巧。
總結(jié)
您已成功學(xué)習(xí)如何使用 Vue Router 輕松修改 URL 狀態(tài)并更新查詢參數(shù)。這是一個(gè)非常有用的功能，我每天都在使用，強(qiáng)烈建議您嘗試:)
以上就是Vue Tips 如何用 URL 存儲業(yè)務(wù)狀態(tài)的詳細(xì)內(nèi)容，更多關(guān)于Vue URL存儲業(yè)務(wù)狀態(tài)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在開發(fā)過程中發(fā)現(xiàn)路徑中帶有/#/的標(biāo)示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項(xiàng)目如何去掉URL中#符號的相關(guān)資料,文中通過實(shí)例代碼的非常詳細(xì),需要的朋友可以參考下2022-07-07
利用Vue的v-for和v-bind實(shí)現(xiàn)列表顏色切換
這篇文章主要介紹了利用Vue的v-for和v-bind實(shí)現(xiàn)列表顏色切換，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue 解決移動(dòng)端彈出鍵盤導(dǎo)致頁面fixed布局錯(cuò)亂的問題
今天小編就為大家分享一篇vue 解決移動(dòng)端彈出鍵盤導(dǎo)致頁面fixed布局錯(cuò)亂的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue slot插槽的使用，在生活中很多地方都有插槽，電腦usb的插槽，插板當(dāng)中的電源插槽，插槽的目的是為了讓我們原來的設(shè)備具備更多的擴(kuò)展性比如電腦的USB我們可以插入U(xiǎn)盤，手機(jī)，鼠標(biāo)，鍵盤等等，下面文章就來介紹Vue slot插槽是如何使用的2021-10-10
vue3+vite項(xiàng)目配置ESlint、pritter插件過程
這篇文章主要介紹了vue3+vite項(xiàng)目配置ESlint、pritter插件過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vuex是一個(gè)專為vue.js應(yīng)用程序開發(fā)的 狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue入門之vuex安裝與使用的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細(xì)介紹了vue組件間傳值的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
用戶因?qū)雟ue-router名稱與創(chuàng)建實(shí)例不一致導(dǎo)致錯(cuò)誤,后發(fā)現(xiàn)導(dǎo)入的是index.js文件,省略文件名,但問題仍未解決,需檢查掛載配置2025-08-08
vue項(xiàng)目配置國際化$t('')的介紹和用法示例
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目配置國際化?$t('')的介紹和用法的相關(guān)資料,多語言和國際化現(xiàn)在已經(jīng)成為一個(gè)網(wǎng)站或應(yīng)用的必要功能之一,Vue作為一款流行的前端框架,在這方面也有著靈活的解決方案,需要的朋友可以參考下2023-09-09
Tag組件其實(shí)是一個(gè)很小的組件，業(yè)務(wù)價(jià)值很低，主要用于Vue新手入門。主要實(shí)現(xiàn)Vue常用的父組件改變子組件的值，view改變model，model的變化反應(yīng)到view上，事件的綁定等功能。下面跟著小編一起來看下吧2017-01-01