Vue Router修改query参数url参数没有变化问题及解决

目录
  • Router修改query参数url参数没有变化问题
    • 正常情况下
    • 就可以修改了
  • vueRouter不切换url只修改query报错
    • 解决方案

Router修改query参数url参数没有变化问题

正常情况下

this.$router.push({
query:{}
})
this.$router.replace({
query:{}
})

就可以修改了

但是当已有query对象里面修改其中一个值，就会发现虽然this.$route.query发生改变但是浏览器的url上的参数并没有发生变化， 尝试将已有的参数进行深拷贝突然发现就可以了

let newQuery= JSON.parse(JSON.stringify(this.$route.query));
newQuery.index = 2;
this.$router.replace({
query: newQuery
})

vueRouter不切换url只修改query报错

使用push的话  会导致返回历史有记录

this.$router.push({
  query: {
    id: this.processId
  }
})

所以需要使用

this.$router.replace({
  query: {
    id: this.processId
  }
})

虽然不影响使用,但是会报如下错误

解决方案

在router.js加上这段

import VueRouter from 'vue-router'

const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location) {
  return originalReplace.call(this, location).catch(err => err)
} 

// push的同理

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

注 适用于3.0.0版本的vue-router,   3.4.x可能会报错.catch获取不到

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

赞 (0)

相关推荐

  • vue引入jquery时报错 $ is not defined的问题及解决

    vue引入jquery时报错 $ is not defined的问题及解决

    目录 vue引入jquery时报错 $ is not defined 安装JQuery 统一webpack版本 新建配置文件 vue错误笔记 Vue is not defined 事情的经过 找到两种解决方案 vue引入jquery时报错 $ is not defined 以免日后再次遇到忘记. 安装JQuery npm install --save jquery 统一webpack版本 不同版本处理方法可能不同,我们这里就统一一下webpack版本 npm uninstall webpack

  • vue在body和query中如何向后端传参

    目录 在body和query中向后端传参 data params vue往后台传参(不是传对象) example 在body和query中向后端传参 在vue向Django后端传参的时候,常常会出现request.body或者其他为空的现象,主要原因是参数存放的位置不对.这里总结一下两种传参方式. data 我们需要传递的数据可以放在data中以键值对的形式来传递到后端. export function registerM(username, password) {     return req

  • 某些场景下建议vue query代替pinia原理解析

    目录 前言 使用区别 pinia vue-query 总结 趋势 前言 在 vue3 中,状态管理都是用的 pinia 来处理和存储从服务端获取的数据.使用 react 的同学应该对 swr.react-query.ahooks 的 useRequest(前两者的模仿)并不陌生,这些是专门用来处理数据请求的, 能够帮助你处理得到的数据.loading.error,还有缓存数据的功能等等.不止有 react-query.vue-query, 还有 svelte-query 和 solid-quer

  • vue3中路由传参query、params及动态路由传参详解

    目录 一.query传参 二.params传参 三.动态传参 四.query传参和params传参的区别 总结 一.query传参 编程式导航 使用router.push 或者 router.replace 的时候,改为对象形式新增query 必须传入一个对象 import { useRouter } from 'vue-router'; ... const router = useRouter() const toDetail = (item: Item) => { router.push({

  • vue项目实例中用query传参如何实现跳转效果

    目录 用query传参实现跳转效果 传值页面 接收参数页面 vue使用query传参,解决跳转回退无参数渲染页面,无内容的方法(不需使用缓存的技术) 简说params和query的区别 用query传参实现跳转效果 vue中已element-ui为例,写带参跳转很方便 <el-table :data="tables" style="width: 100%; cursor: pointer" :class="tableData.length >

  • Vue Router修改query参数url参数没有变化问题及解决

    目录 Router修改query参数url参数没有变化问题 正常情况下 就可以修改了 vueRouter不切换url只修改query报错 解决方案 Router修改query参数url参数没有变化问题 正常情况下 this.$router.push({ query:{} }) this.$router.replace({ query:{} }) 就可以修改了 但是当已有query对象里面修改其中一个值,就会发现虽然this.$route.query发生改变但是浏览器的url上的参数并没有发生变化

  • vue router使用query和params传参的使用和区别

    vue router使用query和params传参的使用和区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

  • vue3不能使用history.pushState修改url参数踩坑

    目录 前言 问题 追根溯源 解决 前言 在重构我的 vue-use-sync-url(辅助将数据和 url 参数进行同步的工具库)时,遇到了一个使用 window.history.pushState 来修改地址栏的 url 参数的 bug,准确来说是 vue-router 的 bug,下面就来讲讲具体是怎么回事. 问题 场景如下,有一个输入框里面输入了内容,点击搜索按钮使用 window.history.pushState 将数据同步到 url 参数上.然后再点击 go about 按钮跳转到别

  • Vue router传递参数并解决刷新页面参数丢失问题

    Vue Router 传参方式: 1. this.$router.push({ name: '模块名称', params: { // 各参数 } }) router.js: export default new Router({ routes: [ { path: '/paramsPassingByRouter', component: ParamsPassingByRouter, children: [ { path: 'paramsMode', name: 'paramsMode', com

  • vue router带参数页面刷新或回退参数消失的解决方法

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

  • 如何处理vue router 路由传参刷新页面参数丢失

    如何处理vue router 路由传参刷新页面参数丢失

    概述 常见场景:点击列表的详情,跳转到详情内页,在内页根据传递的参数获取详情数据. 路由传参一般有如下几种方式,下面主要介编程式导航 router.push 的传参方式: 方法一:通过 params 传参 路由配置如下: { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { thi

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

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

  • python url 参数修改方法

    基于python 3.5,python 2.7 与python3.4 的urllib不同,是urlparse >>> from urllib import parse >>> url = 'http://www.baidu.com/s?wd=codeif.com&spt=1' >>> bits = list(parse.urlparse(url)) >>> bits ['http', 'www.baidu.com', '/s'

  • vue 获取url参数、get参数返回数组的操作

    这是vue过滤器 获取url参数,返回数组 Vue.prototype.$url=function(){ var url = decodeURIComponent(location.search); //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&&quo

  • vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

随机推荐