iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何动态修改$router参数
  • 172
分享到

vue如何动态修改$router参数

2024-04-02 19:04:59 172人浏览 薄情痞子
摘要

目录Vue动态修改$router参数动态修改router路由所带参数vue动态修改$router参数 // 创建一个包含当前 URL 参数的对象 export const getUR

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
    ),
    {}
  );
 

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue如何动态修改$router参数

本文链接: https://www.lsjlt.com/news/168262.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何动态修改$router参数
    目录vue动态修改$router参数动态修改router路由所带参数vue动态修改$router参数 // 创建一个包含当前 URL 参数的对象 export const getUR...
    99+
    2024-04-02
  • vue-router如何实时动态替换路由参数(地址栏参数)
    目录实时动态替换路由参数(地址栏参数)应用场景用法如下replace()和push() 的区别动态替换路由-Url参数安装webpack-merge引入包操作参数实时动态替...
    99+
    2024-04-02
  • vue2中router如何动态传参
    这篇文章主要介绍了vue2中router如何动态传参,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。这个是用vue-cli生成的项目下使用比如...
    99+
    2024-04-02
  • vue如何修改路由参数
    在vue中修改路由参数的方法:1.新建项目,引入vue和vue-router;2.使用Vue.use注册路由;3.定义和配置路由;4.使用merge模块修改路由参数;具体步骤如下:首先,在新建一个html项目,并在项目中引入vue和vue-...
    99+
    2024-04-02
  • vue如何动态修改meta的title
    目录如何动态修改meta的title动态修改路由的meta.title需求解决办法如何动态修改meta的title 需求:不去掉原生导航栏的情况下实现详情页的动态title(列表页q...
    99+
    2024-04-02
  • Oracle动态、静态参数参数修改规则是什么
    这篇文章主要介绍Oracle动态、静态参数参数修改规则是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! oracle动态 静态参数修改规则 首先,查看要修改的o...
    99+
    2024-04-02
  • Vue router动态路由如何实现
    本文小编为大家详细介绍“Vue router动态路由如何实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue router动态路由如何实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。实...
    99+
    2023-07-05
  • Vue Router修改query参数url参数没有变化问题及解决
    目录Router修改query参数url参数没有变化问题正常情况下就可以修改了vueRouter不切换url只修改query报错解决方案Router修改query参数url参数没有变...
    99+
    2024-04-02
  • vue如何实现动态改变地址栏的参数值
    目录动态改变地址栏的参数值监听url地址栏参数变化1.传递参数2.监听参数变化动态改变地址栏的参数值 点击切换Tab,通过watch监听,在地址栏修改对应得active参数,这样刷新...
    99+
    2024-04-02
  • Vue如何动态修改el-table的某列数据
    目录动态修改el-table的某列数据设置el-table某一列点击出现输入框可以编辑动态修改el-table的某列数据 1.对话框打开时调用函数open@opened="...
    99+
    2024-04-02
  • 怎么判断和修改SQL中的动态参数与静态参数
    本篇内容主要讲解“怎么判断和修改SQL中的动态参数与静态参数”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么判断和修改SQL中的动态参数与静态参数”吧!视图 ...
    99+
    2024-04-02
  • Vue如何实现router传参
    本文小编为大家详细介绍“Vue如何实现router传参”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue如何实现router传参”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。vue-router 参数传递的方...
    99+
    2023-07-04
  • springboot 启动如何修改application.properties的参数
    目录修改application.properties的参数1、方法一:直接在cmd中执行2、方法二:配置3、方法三4、方法四springboot项目启动参数以下几种方式都可以被@Va...
    99+
    2024-04-02
  • vue如何动态修改a标签的样式
    今天小编给大家分享一下vue如何动态修改a标签的样式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。代码如下:<!DOC...
    99+
    2023-07-04
  • 使用Spring怎么动态修改时间参数
    使用Spring怎么动态修改时间参数?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。spring实现定时任务的方式有三种,分别是java自带的timer类、spring task...
    99+
    2023-05-31
    spring
  • vue动态修改原生属性
    Vue是一种流行的JavaScript框架,它可以帮助开发者构建高效、响应式的用户界面。虽然Vue提供了许多方便的工具和方法来生成HTML元素的属性,但是有时候我们仍然需要动态地修改原生属性。本文将介绍如何使用Vue来动态地修改原生属性。使...
    99+
    2023-05-17
  • 如何修改redis参数
    修改redis参数的示例:通过redis服务端的终端命令行窗口修改。//修改redis运行参数[root@redis1 utils]# cp /etc/redis/6379.conf /root/6379.conf //可以先备份一份,防止...
    99+
    2024-04-02
  • SpringBoot如何动态修改Scheduled
    这篇文章主要介绍“SpringBoot如何动态修改Scheduled”,在日常操作中,相信很多人在SpringBoot如何动态修改Scheduled问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”SpringB...
    99+
    2023-07-06
  • react如何动态修改style
    这篇文章主要介绍“react如何动态修改style”,在日常操作中,相信很多人在react如何动态修改style问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”react如何动态修改style”的疑惑有所帮助!...
    99+
    2023-07-04
  • 如何使用vue-router实现动态权限控制
    本篇内容介绍了“如何使用vue-router实现动态权限控制”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!使用vue开发带权限管理系统,尤其...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作