vue-router同路由$router.push不跳转一个简单解决方案

vue-router跳转一般是这么写:

toCurrentPage: function(thisId){
this.$router.push({path:'/test ', query: { id: thisId, option: ""}});
}
但是当遇到,需要跳转同页面不同query的情况,上面的方法不起作用。当然了,从性能来说,理论上这种情况最佳的解决方案,是把需要刷新的包裹成一个init function,跳转的方法,传参再次调用init方法。balabalabala……不在赘述。

但是另一些情况,基本页面所有组件都需要刷新,再次加载对开销影响不大,需要history.back以保证操作逻辑顺畅……我们只要跳转加载如此而已,那么其实也很简单,只需在上述方法基础上加上:

watch: {
  '$route' (to, from) {
  this.$router.go(0);
  }
},
监视router变化,刷新页面, 233333333333
---------------------
作者:wulala_orz
来源:CSDN
原文:https://blog.csdn.net/wulala_orz/article/details/78928524?utm_source=copy
版权声明:本文为博主原创文章,转载请附上博文链接!

转自:https://blog.csdn.net/wulala_orz/article/details/78928524?utm_source=copy

vue-router同路由$router.push不跳转一个简单解决方案的更多相关文章

  1. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  2. vue 中router.go;router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  3. vue中router.go、router.push和router.replace的区别

    router.go(n) 这个方法的参数是一个整数,意思是在history记录中向前或者后退多少,类似window.history.go(n) router.push(location) 想要导航到不 ...

  4. vue 中router.go、router.push和router.replace的区别

    router.go(n) 这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n) router.push(location) 想要 ...

  5. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

  6. vue中$route 和$router的区别

    在vue中会出现一种情况 const url=this.$route.query.returnURL; this.$router.push(url);    $router和$route的区别傻傻的分 ...

  7. vue & this.$route & this.$router

    vue & this.\(route & this.\)router const User = { template: '<div>User</div>' } ...

  8. vue工程化与路由router

    一.介绍     vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点.并且提供了很多的周边配套工具 如vue-router ...

  9. vue中的路由

           路由配置项:        import Router from ‘vue-router’                          1.path:路径              ...

随机推荐

  1. android上instant app介绍 类似于微信小程序

    android上instant app介绍 类似于微信小程序instant app 是谷歌推出的类似于微信小程序(或者说小程序类似于instant app)的一项技术,用户无须安装应用,用完就走,同时 ...

  2. 修改Aptana Studio默认编码

    1,修改:Text  file encoding 2,修改:Initial HTML file contents

  3. php 使用代理IP进行数据抓取

    什么是代理?什么情况下会用到代理IP?代理服务器(Proxy Server),其功能就是代用户去取得网络信息,然后返回给用户.形象的说:它是网络信息的中转站.通过代理IP访问目标站,可以隐藏用户的真实 ...

  4. 5、Storm集成Kafka

    1.pom文件依赖 <!--storm相关jar --> <dependency> <groupId>org.apache.storm</groupId> ...

  5. [c/c++] programming之路(26)、结构体

    一.初始化字符串 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include&l ...

  6. 开箱即用的VScode C++环境

    对大部分人来说vscode配置c++环境十分繁琐,这里提供简单方法. 1. 下载VSCode 官方网站下载(便携版):VSCode-win32-ia32-1.32.1.zip 解压VSCode-win ...

  7. Polly 熔断策略

    熔断策略主要以 CircuitBreaker 来完成. 工作原理 熔断器可以被看作为一个主要含有三个状态的状态机 如果以电路开关来看: 开关闭合对应 CLOSED 状态, 开关打开对应 OPEN 状态 ...

  8. EntityFrameworkCore将数据库Timestamp类型在程序中转为long类型

    EntityFrameworkCore将数据库Timestamp类型在程序中转为long类型 EntityFrameworkCore Entity public class Entity { publ ...

  9. 【HNOI 2016】大数

    Problem Description 小 B 有一个很大的数 \(S\),长度达到了 \(N\) 位:这个数可以看成是一个串,它可能有前导 \(0\),例如 00009312345 .小 B 还有一 ...

  10. Python3学习笔记--迭代器

    迭代 使用一个循环来遍历某个东西时这个过程本身叫做迭代. 可迭代对象 python中只要定义了可以返回一个迭代器的__iter__方法,或者定义了可以支持下标索引的__getitem__方法,那么它就 ...