vue如何動(dòng)態(tài)修改$router參數(shù)

更新時(shí)間：2022年09月23日 10:00:51 作者：榴蓮不好吃

這篇文章主要介紹了vue如何動(dòng)態(tài)修改$router參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue動(dòng)態(tài)修改$router參數(shù)

// 創(chuàng)建一個(gè)包含當(dāng)前 URL 參數(shù)的對(duì)象
export const getURLParameters = (url) =>
? (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
? ? (a, v) => (
? ? ? (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
? ? ),
? ? {}
? );
?
/**
?* 替換地址欄參數(shù)
?* @param {key,value}
?*/
export const replaceRouteQuery = (query, params) => {
? let href = window.location.href;
? let origin = href.split('?')[0];
?
? const routeObj = Object.assign({}, getURLParameters(href));
?
? for (let key in params) {
? ? routeObj[key] = params[key];
? }
?
? let isFirst = true, str = '';
? for (let key in routeObj) {
? ? str += `${isFirst ? '?' : '&'}${key}=${routeObj[key]}`;
? ? isFirst = false;
? }
?
? href = origin + str;
? if (window.history) {
? ? // 支持History API
? ? window.history.replaceState(null, '', href);
? }
?
? Object.assign(query, params);
};?
?
// 調(diào)用:?
replaceRouteQuery($route.query, { 'startDate': '2020-01-01' })

注意：該方法只替換地址欄參數(shù)，不會(huì)再歷史記錄里面產(chǎn)生記錄，按瀏覽器回退按鈕會(huì)回到上一個(gè)界面。

動(dòng)態(tài)修改router路由所帶參數(shù)

import merge from 'webpack-merge';
?
//修改原有參數(shù) ? ? ? ?
this.$router.push({
? ? query:merge(this.$route.query,{'XXXXXXXX':'630'})
})
?
//新增一個(gè)參數(shù)：
this.$router.push({
? ? query:merge(this.$route.query,{'XXXXXXXX':'我是新增的一個(gè)參數(shù)，哈哈哈哈'})
})
?
//替換所有參數(shù)：
?this.$router.push({
? ? query:merge({},{'XXXXXXXX':'630'
})

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

您可能感興趣的文章:

相關(guān)文章

vue監(jiān)聽(tīng)scroll的坑的解決方法
這篇文章主要介紹了vue監(jiān)聽(tīng)scroll的坑的解決方法，現(xiàn)在分享給大家，也給大家做個(gè)參考，希望給有同樣經(jīng)歷的人幫助
2017-09-09
基于Vue+ElementUI的省市區(qū)地址選擇通用組件
這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
淺談實(shí)現(xiàn)vue2.0響應(yīng)式的基本思路
這篇文章主要介紹了淺談實(shí)現(xiàn)vue2.0響應(yīng)式的基本思路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue實(shí)現(xiàn)未登錄訪問(wèn)其他頁(yè)面自動(dòng)跳轉(zhuǎn)登錄頁(yè)功能(實(shí)現(xiàn)步驟)
這篇文章主要介紹了vue實(shí)現(xiàn)未登錄下訪問(wèn)其他頁(yè)面自動(dòng)跳轉(zhuǎn)登錄頁(yè),本文分步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
vue實(shí)現(xiàn)在進(jìn)行增刪改操作后刷新頁(yè)面
這篇文章主要介紹了vue實(shí)現(xiàn)在進(jìn)行增刪改操作后刷新頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue2項(xiàng)目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問(wèn)題
這篇文章主要介紹了vue2項(xiàng)目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
你不知道的Vue技巧之--開(kāi)發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開(kāi)發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
基于Vue實(shí)現(xiàn)可選擇不連續(xù)的時(shí)間范圍的日期選擇器
這篇文章主要為大家詳細(xì)介紹了如何基于Vue.js實(shí)現(xiàn)一個(gè)可選擇不連續(xù)的時(shí)間范圍的日期選擇器，文中的示例代碼簡(jiǎn)潔易懂，需要的可以參考一下
2023-06-06
vue項(xiàng)目中l(wèi)oadsh庫(kù)常用方法說(shuō)明
這篇文章主要介紹了vue項(xiàng)目中l(wèi)oadsh庫(kù)常用方法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數(shù)的this
這篇文章主要介紹了Vuejs使用addEventListener的事件觸發(fā)執(zhí)行函數(shù)的this方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06