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

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

相关文章

  • 教你如何使用VUE组件创建SpreadJS自定义单元格

    教你如何使用VUE组件创建SpreadJS自定义单元格

    这篇文章主要介绍了使用VUE组件创建SpreadJS自定义单元格的方法,通常我们使用组件的方式是,在实例化Vue对象之前,通过Vue.component方法来注册全局的组件,文中通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2022-01-01
  • Vue.js高效前端开发

    Vue.js高效前端开发

    Vue是构建Web界面的JavaScript库,原称为Vue.js,它可以通过简洁的API来提供高效的数据绑定和灵活的组件系统,本文详细介绍了Vue的使用安装和相关知识,有兴趣的同学可以参考借鉴
    2023-03-03
  • vue获取当前日期时间(使用moment和new Date())

    vue获取当前日期时间(使用moment和new Date())

    在项目开发中我遇到了日期范围选择器,两种获取当前日期并做处理的写法,这里记录一下,下面这篇文章主要给大家介绍了关于vue获取当前日期时间(使用moment和new Date())的相关资料,需要的朋友可以参考下
    2023-06-06
  • 基于vue+echarts 数据可视化大屏展示的方法示例

    基于vue+echarts 数据可视化大屏展示的方法示例

    这篇文章主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2020-03-03
  • vue.js移动端app之上拉加载以及下拉刷新实战

    vue.js移动端app之上拉加载以及下拉刷新实战

    这篇文章主要介绍了vue.js移动端app之上拉加载以及下拉刷新实战,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • Vue整合Node.js直连Mysql数据库进行CURD操作过程详解

    Vue整合Node.js直连Mysql数据库进行CURD操作过程详解

    这篇文章主要给大家分享Vue整合Node.js,直连Mysql数据库进行CURD操作的详细过程,文中有详细的代码讲解,具有一定的参考价值,需要的朋友可以参考下
    2023-07-07
  • 详解为element-ui的Select和Cascader添加弹层底部操作按钮

    详解为element-ui的Select和Cascader添加弹层底部操作按钮

    这篇文章主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue实现验证码输入框组件

    vue实现验证码输入框组件

    最近做项目遇到这样的需求要求输入4位或6位短信验证码,输入完成后收起键盘。实现步骤大家参考下本文
    2017-12-12
  • Vue实现动态路由导航的示例

    Vue实现动态路由导航的示例

    本文主要介绍了Vue实现动态路由导航的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • Vue实现动态创建和删除数据的方法

    Vue实现动态创建和删除数据的方法

    下面小编就为大家分享一篇Vue实现动态创建和删除数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论