vue如何動態(tài)修改$router參數(shù)
更新時間:2022年09月23日 10:00:51 作者:榴蓮不好吃
這篇文章主要介紹了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組件創(chuàng)建SpreadJS自定義單元格
這篇文章主要介紹了使用VUE組件創(chuàng)建SpreadJS自定義單元格的方法,通常我們使用組件的方式是,在實例化Vue對象之前,通過Vue.component方法來注冊全局的組件,文中通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2022-01-01vue獲取當前日期時間(使用moment和new?Date())
在項目開發(fā)中我遇到了日期范圍選擇器,兩種獲取當前日期并做處理的寫法,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue獲取當前日期時間(使用moment和new?Date())的相關(guān)資料,需要的朋友可以參考下2023-06-06基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例
這篇文章主要介紹了基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-03-03vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)
這篇文章主要介紹了vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn),非常具有實用價值,需要的朋友可以參考下2017-09-09Vue整合Node.js直連Mysql數(shù)據(jù)庫進行CURD操作過程詳解
這篇文章主要給大家分享Vue整合Node.js,直連Mysql數(shù)據(jù)庫進行CURD操作的詳細過程,文中有詳細的代碼講解,具有一定的參考價值,需要的朋友可以參考下2023-07-07詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-02-02Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法
下面小編就為大家分享一篇Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03