vue如何動(dòng)態(tài)修改$router參數(shù)
更新時(shí)間：2022年09月23日 10:00:51 作者：榴蓮不好吃
這篇文章主要介紹了vue如何動(dòng)態(tài)修改$router參數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue動(dòng)態(tài)修改$router參數(shù)
// 創(chuàng)建一個(gè)包含當(dāng)前 URL 參數(shù)的對象
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è)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
- vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法
- Vue3之路由跳轉(zhuǎn)與參數(shù)獲取方式
- Vue路由跳轉(zhuǎn)傳參或者打開新頁面跳轉(zhuǎn)問題
- vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)
- vue中$router.back()和$router.go()的用法
- vue項(xiàng)目如何使用$router.go(-1)返回時(shí)刷新原來的界面
- vue中路由跳轉(zhuǎn)的多種方式(和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別)
相關(guān)文章
教你如何使用VUE組件創(chuàng)建SpreadJS自定義單元格
這篇文章主要介紹了使用VUE組件創(chuàng)建SpreadJS自定義單元格的方法，通常我們使用組件的方式是，在實(shí)例化Vue對象之前，通過Vue.component方法來注冊全局的組件,文中通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-01-01
Vue是構(gòu)建Web界面的JavaScript庫，原稱為Vue.js，它可以通過簡潔的API來提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，本文詳細(xì)介紹了Vue的使用安裝和相關(guān)知識(shí)，有興趣的同學(xué)可以參考借鑒2023-03-03
vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())
在項(xiàng)目開發(fā)中我遇到了日期范圍選擇器,兩種獲取當(dāng)前日期并做處理的寫法,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())的相關(guān)資料,需要的朋友可以參考下2023-06-06
基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例
這篇文章主要介紹了基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-03-03
vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)
這篇文章主要介紹了vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
Vue整合Node.js直連Mysql數(shù)據(jù)庫進(jìn)行CURD操作過程詳解
這篇文章主要給大家分享Vue整合Node.js，直連Mysql數(shù)據(jù)庫進(jìn)行CURD操作的詳細(xì)過程，文中有詳細(xì)的代碼講解，具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
最近做項(xiàng)目遇到這樣的需求要求輸入4位或6位短信驗(yàn)證碼，輸入完成后收起鍵盤。實(shí)現(xiàn)步驟大家參考下本文2017-12-12
Vue實(shí)現(xiàn)動(dòng)態(tài)路由導(dǎo)航的示例
本文主要介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)路由導(dǎo)航的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法
下面小編就為大家分享一篇Vue實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03