首页
编程最新

分类

当前位置: 云海天教程网 > 技术新闻 > 编程最新 >正文

vue如何动态修改$router参数

更新时间:2022-09-23  作者:佚名   来源: 网络转载

vue如何动态修改$router参数【vue面试】

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持云海天教程。 

上一篇:基于Redis分布式锁Redisson及SpringBoot集成Redisson【java面试】 下一篇:前端算法题解 leetcode50-Pow(x, n)
小编推荐
快速导航更多>>
JavaScript 教程 HTML5 教程 CSS3 教程 jQuery 教程 Vue.js 教程 Node.js 教程 SQL 教程 C 教程 PHP 教程 Linux 教程 Docker 教程 Nginx 教程 Python 教程 Java 教程

云海天教程网 版权所有

 陕公网安备 61050202000585号

陕ICP备14013131号-3