vue如何動態(tài)修改$router參數(shù)
vue動態(tài)修改$router參數(shù)
// 創(chuà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ù),不會再歷史記錄里面產(chǎn)生記錄,按瀏覽器回退按鈕會回到上一個界面。
動態(tài)修改router路由所帶參數(shù)
import merge from 'webpack-merge';
?
//修改原有參數(shù) ? ? ? ?
this.$router.push({
? ? query:merge(this.$route.query,{'XXXXXXXX':'630'})
})
?
//新增一個參數(shù):
this.$router.push({
? ? query:merge(this.$route.query,{'XXXXXXXX':'我是新增的一個參數(shù),哈哈哈哈'})
})
?
//替換所有參數(shù):
?this.$router.push({
? ? query:merge({},{'XXXXXXXX':'630'
})以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue+ElementUI的省市區(qū)地址選擇通用組件
這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
淺談實現(xiàn)vue2.0響應(yīng)式的基本思路
這篇文章主要介紹了淺談實現(xiàn)vue2.0響應(yīng)式的基本思路,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
vue實現(xiàn)未登錄訪問其他頁面自動跳轉(zhuǎn)登錄頁功能(實現(xiàn)步驟)
這篇文章主要介紹了vue實現(xiàn)未登錄下訪問其他頁面自動跳轉(zhuǎn)登錄頁,本文分步驟給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
vue2項目使用element-ui的el-tabs組件導致瀏覽器崩潰卡死問題
這篇文章主要介紹了vue2項目使用element-ui的el-tabs組件導致瀏覽器崩潰卡死問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07
你不知道的Vue技巧之--開發(fā)一個可以通過方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個可以通過方法調(diào)用的組件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
基于Vue實現(xiàn)可選擇不連續(xù)的時間范圍的日期選擇器
這篇文章主要為大家詳細介紹了如何基于Vue.js實現(xiàn)一個可選擇不連續(xù)的時間范圍的日期選擇器,文中的示例代碼簡潔易懂,需要的可以參考一下2023-06-06
Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數(shù)的this
這篇文章主要介紹了Vuejs使用addEventListener的事件觸發(fā)執(zhí)行函數(shù)的this方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06

