vue-router3.0版本中 router.push 不能刷新页面的问题

在 github 的 vue-router 中找到同样的一个问题：3.0.1版本通过router实例无法跳转

昨天发现有些路由不能正常跳转，找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方。
出现的情况是 router.push 后，url变化了，但是页面没有刷新，手动刷新一下才出现应有的画面。

我看了一下 package.json，我的 vue 和 axios 是没有写版本号，但 vue-router 明明写了版本号，怎么可能以前行的，现在就不行了呢？

然后，我使用 npm view vue-router 查看后才发现使用的已经不是 package.json 中的版本了，于是断定也许是我前几天 npm update 了！

( 以后不要随便 update 了! )

具体为什么新版本不行了，我也不太清楚。

最简单的解决办法当然是直接把 router.push 改成 this.$router.push

但是，如果这样可以的话，我当初为什么要在组件内再实例化一个 Router 呢？

显然是因为有些地方的 this 并不是 vue,那么，再实例化一个 vue，然后使用 vue.$router 行吗？

答案当然是不行的，因为这个 vue 与 其它地方的 vue 应该又不是同一个对象了。

那么，终极的解决方案就是：

把全局的 vue 中的 router 加到 window 中，也就在 main.js 中使用：

window.router=router

然后其它任何地方就可以直接愉快地使用 router.push 等 router 的方法了。

分析原因：

实例后的 router 不能刷新页面，应该是因为它与全局的vue中的 this.$router 的不是同一个，而之前的版本中能直接这样使用，应该是使用了单例。

至于为什么不使用单例了，这个我怎么会知道？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue页面刷新或者后退参数丢失的问题

    在toB的项目中,会经常遇到列表数据筛选查询的情景,当要打开某一项的详情页或者暂时离开列表页,再返回(后退时),选择的筛选条件会全部丢失,辛辛苦苦选择好的条件全没了,还得重新选择,如果有分页的更头大,还得重新一页页翻到之前看到的那一页,用户体验极度不友好. 我的解决有两种: 第一种方法:用vue 的<keep-alive>,即在<router-view>外套一层<keep-alive>. 虽然可以达到一定效果,但是控制起来比较麻烦,比如项目中并不是所有页面都需要缓存,代

  • vue项目如何刷新当前页面的方法

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制r

  • 解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）

    问题描述: 在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值: 解决: 运用 this.$forceUpdate()强制刷新 代码案例 <Select v-model="carSafeLine.insuranceName" placeholder="请选择" class="mulisel option-h" filterable clearable :disabled=&quo

  • vue刷新页面时去闪烁提升用户体验效果的实现方法

    首先在最外层div添加v-if="isReloadAlive",并创建变量isReloadAlive = true 随后添加provide()以及reload方法,如下: export default { provide() { return { reload: this.reload } }, data(){ isReloadAlive : true }, methods: { reload() { this.isReloadAlive = false; this.$nextTick

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成

  • 解决vue 路由变化页面数据不刷新的问题

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击 按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入

  • 使用sessionStorage解决vuex在页面刷新后数据被清除的问题

    1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度 我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化 3.具体实现

  • vue-router3.0版本中 router.push 不能刷新页面的问题

    在 github 的 vue-router 中找到同样的一个问题:3.0.1版本通过router实例无法跳转 昨天发现有些路由不能正常跳转,找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方. 出现的情况是 router.push 后,url变化了,但是页面没有刷新,手动刷新一下才出现应有的画面. 我看了一下 package.json,我的 vue 和 axios 是没有写版本号,但 vue-router 明明写了版本号,怎么可能

  • Vue this.$router.push(参数)实现页面跳转操作

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串: // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId

  • vue 2.0项目中如何引入element-ui详解

    vue 2.0项目中如何引入element-ui详解

    前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧. 一.新建项目 1.查看 node和npm是不是已经安装好命令:node -v  npm -v (没有安装的先安装环境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)

  • vue实现路由不变的情况下，刷新页面操作示例

    本文实例讲述了vue实现路由不变的情况下,刷新页面操作.分享给大家供大家参考,具体如下: 背景1:在vue写的后台管理项目中,经常会有增.删.改.查的操作,这些操作只是跟用接口跟后台交互下 既然用接口交互,那肯定就是axios的异步请求,那么就是说后台数据发生了改变,但是前台的数据并没有实时的更新(每次操作完后台把列表数据重新返给你例外,但是这样的话每次交互的数据量就偏大了) 背景2:在使用动态路由配置 /detail/:id 这样的情况下,由于 router-view 是复用的,单纯的改变 i

  • vue实现在进行增删改操作后刷新页面

    问题 通常在后台管理项目中,对数据进行增删改查是常规操作.在进行这些操作后,需要手动刷新才能更新列表.本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据. 解决方案 || 以删除为例: 1.强制刷新:this.$forceUpdate() 2.使用window.reload( ) 或 router.go(0),但会使整个浏览器进行重载,页面闪烁. 3.重新调用接口:但性能较差,代码冗长. 4.provide / inject :(推荐) 点此查看VUE官方解释: 允许一个祖先组

  • vue中按钮操作完刷新页面的实现

    vue中按钮操作完刷新页面的实现

    目录 vue按钮操作完刷新页面 1.父组件中实现 2.子组件绑定 点击按钮后自动刷新页面 vue按钮操作完刷新页面 首先从子组件和父组件角度去写这个东西,简言之就是在父组件中实现这个刷新功能方法,然后在子组件中进行绑定并进行监听就好了啊 1.父组件中实现 ① 图示部分: 个人建议这个作为父组件,肯定一般是放在列表中的,即把列表页面作为父组件的归属地 ② 代码部分: method方法中部分 refresh () { this.reload() } 将reload进行注入 inject: ['rel

  • .NET2.0版本中基于事件的异步编程模式(EAP)

    .NET2.0版本中基于事件的异步编程模式(EAP)

    一.引言 APM为我们实现异步编程提供了一定的支持,同时它也存在着一些明显的问题——不支持对异步操作的取消和没有提供对进度报告的功能,对于有界面的应用程序来说,进度报告和取消操作的支持也是必不可少的. 微软在.NET 2.0的时候就为我们提供了一个新的异步编程模型,也就是基于事件的异步编程模型——EAP(Event-based Asynchronous Pattern ). 二.介绍 实现了基于事件的异步模式的类将具有一个或者多个以Async为后缀的方法和对应的Completed事件,并且这些类

  • .NET1.0版本中的异步编程模型(APM)

    .NET1.0版本中的异步编程模型(APM)

    一.概念 .NET 1.0提出了APM(Asynchronous Programming Model)即异步编程模式. .NET的类库有以BeginXXX和EndXXX类似的方法,就是使用异步编程模型. NET Framework很多类也实现了该模式,同时我们也可以自定义类来实现该模式,即在自定义的类中实现返回类型为IAsyncResult接口的BeginXXX方法和EndXXX方法,另外委托类型也定义了BeginInvoke和EndInvoke方法. 异步编程模型的本质 利用委托和线程池帮助我

  • 详解vue-router 2.0 常用基础知识点之router.push()

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location) 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL. 当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="...&

  • vue-router 2.0 跳转之router.push()用法说明

    router.push(location) 除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location) 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL. 当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 等同于调用 router.push(-). 声明式:&l

随机推荐