vue如何动态修改$router参数

 更新时间:2022年09月23日 10:00:51   作者:榴莲不好吃  
这篇文章主要介绍了vue如何动态修改$router参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue动态修改$router参数

// 创建一个包含当前 URL 参数的对象
export const getURLParameters = (url) =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
    ),
    {}
  );
 
/**
 * 替换地址栏参数
 * @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);
}; 
 
// 调用: 
replaceRouteQuery($route.query, { 'startDate': '2020-01-01' })

 注意:该方法只替换地址栏参数,不会再历史记录里面产生记录,按浏览器回退按钮会回到上一个界面。

动态修改router路由所带参数

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'
})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • Vue3中watchEffect和watch的基础应用详解

    Vue3中watchEffect和watch的基础应用详解

    watch是一个侦听器,默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数,watchEffect是会自动收集函数里面变量的响应式依赖,本文主要来讲讲二者的区别,感兴趣的可以了解一下
    2023-07-07
  • vscode+vue cli3.0创建项目配置Prettier+eslint方式

    vscode+vue cli3.0创建项目配置Prettier+eslint方式

    这篇文章主要介绍了vscode+vue cli3.0创建项目配置Prettier+eslint方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 前端axios取消请求总结详解

    前端axios取消请求总结详解

    这篇文章主要为大家介绍了前端axios取消请求总结示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue-baidu-map 进入页面自动定位的解决方案(推荐)

    vue-baidu-map 进入页面自动定位的解决方案(推荐)

    这篇文章主要介绍了vue-baidu-map 进入页面自动定位的解决方案,需要的朋友可以参考下
    2018-04-04
  • VUE引入使用G2图表的实现

    VUE引入使用G2图表的实现

    本文主要介绍了VUE引入使用G2图表的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 微信小程序Echarts动态使用及图表层级踩坑解决方案

    微信小程序Echarts动态使用及图表层级踩坑解决方案

    这篇文章主要为大家介绍了微信小程序Echarts动态使用及图表层级踩坑解决方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue实现拖拽交换位置

    vue实现拖拽交换位置

    这篇文章主要为大家详细介绍了vue实现拖拽交换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 解决vue项目,npm run build后,报路径错的问题

    解决vue项目,npm run build后,报路径错的问题

    这篇文章主要介绍了解决vue项目,npm run build后,报路径错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue点击项目唯一id生成器nanoid的使用方式

    vue点击项目唯一id生成器nanoid的使用方式

    这篇文章主要介绍了vue点击项目唯一id生成器nanoid的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 使用vue-antd动态切换主题

    使用vue-antd动态切换主题

    这篇文章主要介绍了使用vue-antd动态切换主题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论