目录Vue动态修改$router参数动态修改router路由所带参数vue动态修改$router参数 // 创建一个包含当前 URL 参数的对象 export const getUR
// 创建一个包含当前 URL 参数的对象
export const getURLParameters = (url) =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => (
(a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
),
{}
);
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);
};
// 调用:
replaceRouteQuery($route.query, { 'startDate': '2020-01-01' })
注意:该方法只替换地址栏参数,不会再历史记录里面产生记录,按浏览器回退按钮会回到上一个界面。
import merge from 'webpack-merge';
//修改原有参数
this.$router.push({
query:merge(this.$route.query,{'XXXXXXXX':'630'})
})
//新增一个参数:
this.$router.push({
query:merge(this.$route.query,{'XXXXXXXX':'我是新增的一个参数,哈哈哈哈'})
})
//替换所有参数:
this.$router.push({
query:merge({},{'XXXXXXXX':'630'
})
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue如何动态修改$router参数
本文链接: https://www.lsjlt.com/news/168262.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0