解决vue修改路由的查询字符串(query)url不改变,页面不刷新问题

我个人猜测可能是对路由的数据检测深度不够吧,单纯修改query里面的属性是不能触发数据驱动的,因此要直接给query赋值新的对象才能驱动数据更新,做法如下

第一种

 var query=JSON.parse(JSON.stringify(this.$route.query))
query.id="success"
this.$router.push({path:‘/url‘,query:query})

第二种

var query={id:‘123456‘}
this.$router.push({path:‘/‘,query:query})

两种方法都大同小异,原理都是给query新的对象,而不是修改query的属性值,因为query本质是一个对象地址,指向存放这个对象的堆空间,堆空间改变,query值并没有改变,因此route会认为数据没有改变而没有更新路由。

原文地址:https://www.cnblogs.com/shuen/p/10929837.html

时间: 2024-09-30 04:54:35

解决vue修改路由的查询字符串(query)url不改变,页面不刷新问题的相关文章

解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题

原因:在路由中添加了相同的路由.解决:重写路由的push方法 在src/router/index.js 里面import Router from 'vue-router'下面写入下面方法即可 /** * 重写路由的push方法 */ const routerPush = Router.prototype.push Router.prototype.push = function push(location) { return routerPush.call(this, location).cat

Flask学习 2修改路由规则 传入参数访问url

#!/usr/bin/env python # encoding: utf-8 """ @version: v1.0 @author: cxa @file: flask02.py @time: 2018/04/13 14:55 """ """ 要给 URL 添加变量部分,你可以把这些特殊的字段标记为 <variable_name> , 这个部分将会作为命名参数传递到你的函数.规则可以用 <conve

node中转换URL字符串与查询字符串

一个完整的URL字符串中,从"?"(不包括?)到"#"(如果存在#)或者到该URL字符串结束(如果不存在#)的这一部分称为查询字符串. 可以使用Query String模块中的parse方法将该字符串转换为一个对象,parse方法的使用方式如下所示: querystring.parse(str,[sep],[eq],[options]); str表示被转换的查询字符串, sep.字符串中的分隔符,默认是& eq.该字符串中的分配符,默认为=."=&

ElasticSearch查询字符串

简易搜索 search API有两种表单:一种是"简易版"的查询字符串(query string)将所有参数通过查询字符串定义,另一种版本使用JSON完整的表示请求体(request body),这种富搜索语言叫做结构化查询语句(DSL) 查询字符串搜索对于在命令行下运行点对点(ad hoc)查询特别有用.例如这个语句查询所有类型为tweet并在tweet字段中包含elasticsearch字符的文档: GET /_all/tweet/_search?q=tweet:elasticse

vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性

最近在用vue写h5项目,当使用window.location重定向页面或者刷新当前页面时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 后来在网上查找大神的解决方案如下: export default { name: 'App', created () { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.as

HTTP 错误 404.15 - Not Found 请求筛选模块被配置为拒绝包含的查询字符串过长的请求(查询条件太多时,会报错,因为IIS 7对于Query String有长度限制。默认为2048)

错误信息如下: TTP 错误 404.15 - Not Found    请求筛选模块被配置为拒绝包含的查询字符串过长的请求. ?Web 服务器上的请求筛选被配置为拒绝该请求,因为查询字符串过长.可尝试的操作:?确认 applicationhost.config 或 web.config 文件中的configuration/system.webServer/security/requestFiltering/[email protected] 设置.链接和更多信息这是一项安全功能.请不要更改此功

解决vue单页路由跳转后scrollTop的问题

作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路由的时候做个处理,如下: import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); Vue.use(Router) export default new Router({ routes: [ { path: '/',

Vue之路由跳转传参,插件安装与配置

路由跳转 this.$router.push('/course'); this.$router.push({name:course}); this.$router.go(-1); //后退一页 this.$router.go(1): // 前进一页 <router-link to = "/course">课程页</router-link> <router-link :to="{name:'course'}"> 课程页 </r

NHibernate之旅(4):探索查询之条件查询(Criteria Query)

本节内容 NHibernate中的查询方法 条件查询(Criteria Query) 1.创建ICriteria实例 2.结果集限制 3.结果集排序 4.一些说明 根据示例查询(Query By Example) 实例分析 结语 上一节,我们介绍了NHibernate查询语言的一种:NHibernate查询语言(HQL,NHibernate Query Language),这一节介绍一下条件查询(Criteria API). NHibernate中的查询方法 在NHibernate中提供了三种查