Vue中如何动态调整$router参数实现页面跳转？

本文共计354个文字，预计阅读时间需要2分钟。

目录 + Vue动态修改$router参数 + 动态修改router路由所带参数 + Vue动态修改$router参数 + // 创建一个包含当前URL和参数的对象 export const getURLParameters=(url)=> (url.match(/(?:\?|#|&)([^=]+)=([^&]*)/g) || []).reduce((obj, item)=> { obj[item[1]]=decodeURIComponent(item[2]); return obj; }, {});

目录

• vue动态修改$router参数
• 动态修改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' })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。