vue 返回刷新页面不keepAlive

问题：

vue项目，从A页面进入B页面，再返回A页面的时候，页面不刷新。

举例：

从列表页面，选择一条数据点击进去查看详情，这时候页面刷新了，并且执行了 created（）方法和 mounted（）方法，这个时候返回上一页，也就是列表页面，选择另外一条数据点击进来查看详情，页面上保留的还是上一条信息，并且没有执行created（）方法，直接执行了 mounted（）方法。

思考：

一开始我想到的是，页面添加刷新就行了，把 window.location.reload() ; 添加到 mounted（）方法里面，这时候你猜怎么着，页面开始不停的刷新，所以这条路就走不通了。

然后我发现，在详情页面上我设置了keepAlive（代码见小图，此小图可放大），页面缓存了，所以没刷新，这时候第二条思路出现了，取消 keepAlive 就行了啊，开始搜 ‘vue 返回不keeplive’ ，链接见文末，但是我App.vue 页面上并没有使用 <router-view></router-view> ，作为萌新，就开始不晓得怎么搞了。

这个时候我发现第三条路，虽然我没使用 <router-view></router-view> 但是却找到了 beforeRouteLeave(to, from, next) {} ，这个方法是和 methods 同级的（详情见小图，可放大），（这里简单介绍一下导航守卫 beforeRouteLeave 的一些参数，to:router 即将要进入的路由对象，from:router 当前导航正要离开的路由，next() 进行管道中的下一个钩子，最后要确保调用 next 方法，否则钩子不会被 resolved，不清楚的可以复制下面代码，查看打印结果），这个是离开路由前执行的方法，那么我只要在离开这个页面之前，刷新一下页面，就相当于是在下次点击列表之前已经刷新了页面，问题解决！

  beforeRouteLeave(to, from, next) {console.log(to);console.log(from);console.log(next);if (to.path === "/job") {window.location.reload();} else {}next ();}

反思：

这个属于剑走偏锋了，后期了解了<router-view></router-view> 之后再做改良，

链接地址：https://blog.csdn.net/leileibrother/article/details/79376502

vue 返回刷新页面不keepAlive相关推荐

VUE倒计时刷新页面不影响
前端强制性JS倒计时关闭浏览器(刷新页面也存在)也会存在的倒计时* VUE 倒计时刷新页面也存在 (持续更新) 不多BB 直接上代码活用 localStorage 机制 (VUE+webpack版 ...
Nginx 部署 Vue 项目刷新页面出现404
问题使用Vue.框架,利用vue-route编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会 ...
vue在刷新页面的时候调取方法
项目场景: 最近再做一个软电话,需求表示,关闭页面的时候电话签出.但是刷新页面的时候没有调取签出方法,demo上是写的window.onbeforeunload = function(){} 问题描述 ...
Vue中刷新页面的三种方式
一.通过js原始方法刷新 <template><div><div class="header"><button @click=" ...
Vue强制刷新页面重新加载数据方法
业务场景在管理后台执行完增删改查的操作之后,需要重新加载页面刷新数据以便页面数据的更新实现原理就是通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果,show ...
Vue定时刷新页面数据
我现在只知道两种最常见的定时刷新方案,一种是利用Vue的内置函数setTimeout.setInterval定时执行,另一种是websocket消息推送.我的需求是,当数据库中的数据发生更新时,前端就 ...
微信html开发返回刷新页面,解决微信内置浏览器返回上一页强制刷新问题方法...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
html判断返回刷新页面,jquery判断页面是否刷新？
jquery判断页面是否刷新的方法: 1.jquery判断页面是刷新还是新建: 通过赋值判断window.name的值获取页面的状态是刷新还是新建的.if(!window.name){ alert(& ...
问题排查：vue项目刷新页面加载了500多个请求？
问题背景某项目上线后,打开登录页加载了500多个请求,包含了js.css.png等等. 因为项目部署在第三方云平台,直接被当做恶意攻击,把IP封掉了如下图: 问题分析 Webpack 内置了 pr ...

vue 返回刷新页面不keepAlive

问题：

举例：

思考：

反思：

vue 返回刷新页面不keepAlive相关推荐

最新文章

热门文章

vue 返回刷新页面 不keepAlive

问题：

举例：

思考：

反思：

vue 返回刷新页面 不keepAlive相关推荐

最新文章

热门文章

vue 返回刷新页面不keepAlive

vue 返回刷新页面不keepAlive相关推荐