vue如何动态修改$router参数

目录
  • 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'
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中$router.back()和$router.go()的用法

    目录 $router.back()和$router.go() vue点击按钮跳转页面总结 router.push router.replace router.go 总结一下在Vue里面跳转页面的方法 解析router.push 和 router.replace的区别 $router.back()和$router.go() 返回上一页,有两种方法: 1. $router.back() 2. $router.go() 使用$router.back()和$router.go(-1)作用相同,都是返回原

  • Vue Router4路由导航守卫实例全面解析

    目录 前言 一.什么是导航守卫 二.全局前置守卫 可选的第三个参数 next 三.全局解析守卫 四.全局后置钩子 五.路由独享的守卫 六.组件内的守卫 可用的配置 API 使用组合 API 七.完整的导航解析流程 前言 在写Vue项目的时候,少不了使用路由vue-router,而路由守卫是vue-router中一个非常重要的概念,也是非常重要的技巧.它能够很好的帮助开发者“监视”每一个跳转的路由. 一.什么是导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫

  • vue-router如何实时动态替换路由参数(地址栏参数)

    目录 实时动态替换路由参数(地址栏参数) 应用场景 用法如下 replace()和push() 的区别 动态替换路由-Url参数 安装webpack-merge 引入包 操作参数 实时动态替换路由参数(地址栏参数) 应用场景 例如: 页面上有多个tab,点击不同的tab,跳转到不同的页面上去,再次返回的时候,需要知道上次点击的是哪个tab,这样不用存缓存,直接改路由参数,然后直接返回就可以了: 用法如下 import merge from 'webpack-merge'; //如果路由没有参数n

  • vue项目如何使用$router.go(-1)返回时刷新原来的界面

    目录 使用$router.go(-1)返回时刷新原来的界面 问题如下 解决方法1 解决方法2 this.$router.back()与this.$router.go(-1)返回上一页的区别 使用$router.go(-1)返回时刷新原来的界面 在项目需求中,我们常常需要使用$router.go(-1)返回之前的页面,但是却发现,之前的界面,保持着上次跳转的状态,比如说:弹框未关闭之类的等等,..... 问题如下 界面1 : 界面2使用$router.go(-1)返回上一次的界面 由于使用$rou

  • vue-router路由跳转问题 replace

    目录 vue-router路由跳转replace vue router路由跳转方法概述 一.概述 二.跳转方法 三.路由中params和query的区别 vue-router路由跳转replace 1.push 常用 this.$router.push() 2.replace 不会在浏览器得历史记录中加,只会替代掉最后一条记录(这个比较好用) this.$router.replace() 3.go this.$router.go() this.$router.back(-1) vue route

  • vue如何动态修改$router参数

    目录 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

  • vue实现动态表格提交参数动态生成控件的操作

    上面要求做一个根据后台数据动态生成控件,然后让用户输入提交查询信息,然后动态生成表格在显示出来.动态控件代码如下 <el-form :model="formData" style="padding: 0 5px;"> <div v-if="tableshow"> <div v-for="(item,i) in control" :key="i" style="padd

  • vue router动态路由设置参数可选问题

    在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上. 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不同,显示不同的页面 问题 使用以下代码片段是不能实现以上效果的,因为默认情况下page和id参数是必传的,如果不传参数,则会根据默认路由跳转到home页面 new Router({ routes: [ { path: '/user/:page/:id', name: 'User', component: () => impo

  • Vue 动态设置路由参数的案例分析

    在vue中 可以动态设置路由参数: 1.使用this.$router.go(),与js histroy.go() 用法一直,前进1,后退-1,当前页面:0 注意 使用go时 必须是已经有访问历史记录了 案例: <template> <div> <button @click="goht">后退<button> <br/> <button @click="goqj">前进<button>

  • vue动态路由:路由参数改变,视图不更新问题的解决

    问题描述: 使用vue动态路由("/route/:id" 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下: 原因分析: 具体原因在vue官方文档:响应路由参数的变化一节中有讲过: 当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用.因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效.不过,这也意味着组件的生命周期钩子不会再被调用. 复用组件时,想对路由参数的变化作出响应的话,你可以简单地 wa

  • vue中动态参数与计算属性的使用方法

    vue中动态参数与计算属性的使用方法

    一,动态参数 从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数: <a v-bind:[attributeName]="url"> - 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用.例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "href",那么这个绑定将等价于 v-bind:hr

  • vue项目动态设置页面title及是否缓存页面的问题

    vue项目动态设置页面title及是否缓存页面的问题

    跟传统的页面可以在每个页面分别设置填写对应的页面title,but,vue是单页面应用项目,想设置页面对应的title就不能跟传统方式一样了. 下载 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在router的index.js的路由中加上参数 { path: '/login', comp

  • 使用Vue生成动态表单

    开需求会了,产品说这次需求的表单比较多,目前有18个,后期的表单可能会有增加.修改.我作为这次的前端开发,看到这样的需求,心里知道要这样搞不得把自己累死,首先表单居多,还会有变更,以后维护起来也让人心力憔悴. 于是我提议做动态表单,做一个表单的配置系统,在系统里配置表单类型.表单得字段.以及对表单得管理.后来重新评审了需求,系统部分由后端自行开发,我要处理的部分是动态生成表单,展现提交的表单,以及对表单的处理情况. 数据接口设计 表单类型的接口就不用说了,这个比较简单.我跟后端约定了一个预备创建

  • vue路由跳转传递参数的方式总结

    日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种: 1)通过动态路由方式 //路由配置文件中 配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push('/detail/' + id) //跳转后页面获取参数 this.$route.params.id 2)通过query属性传值 //路由配置文件中 { path: '/detail

  • Nuxt的动态路由和参数校验操作

    Nuxt的动态路由和参数校验操作

    其实动态路由就是带参数的路由.比如我们现在新闻模块下面有很多新闻详情页,这时候就需要动态路由的帮助了. 新闻详细页面 我们在news文件夹下面新建了_id.vue的文件,以下划线为前缀的Vue文件就是动态路由,然后在文件里边有$route.params.id来接收参数. /pages/news/_id.vue <template> <div> <h2>News-Content{{$route.params.id}}</h2> <ul> <l

随机推荐