解决VUE-Router 同一页面第二次进入不刷新的问题


Posted in Javascript onJuly 22, 2020

最近正好遇到一个问题,修改用户的头像,修改后再进入用户主页,发现改了之后即使数据变了。。页面也不会重新渲染。。。

下面提供几种解决方案来给予大家参考:

1. 可以在刷新的页面定义一个参数, 这样每次都会渲染出不同的页面:

route 实例化命名配置:

{
   // 用户信息
   path: '/accountDetail/:randKey',
   name: 'accountDetail',
   component: accountDetail,
   meta: {requiresAuth: true}
 },

跳转 的地方配置:

var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
 var maxLength = 15;
    var res = '_jsonpphotochange';
    for (var i = 0; i < maxLength; i++) {
      var id = Math.ceil(Math.random() * 35);
      res += chars[id];
    }
    // res 为随机字符串,下面是跳转:
 this.$router.push('/accountDetail/' + paramsAccount);

2. 可以让全局的页面都重载,这个比较狠冗余也多,慎重点用:

在App.vue下修改:

<template>
 <div id="app" class="app">
  <transition :key="key">
  <router-view class="router-view"></router-view>
  </transition>
 </div>
 </template>
 <script type="text/ecmascript-6">
 // import {mapState} from 'vuex';
 export default {
  name: 'app',
  computed: {
  key() {
   return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date();
  }
  }
 };
 </script>
// 就是在template下加一对标签<transition></transition> 加上key的属性,不过官网说 如果防止组件的复用就用这个 还是比较推荐这个方法的。

3. watch 来检测路由变化。。缺点是,有时候会莫名出现 点两次的情况,也就是你要跳转会跳转两次。。有人说是进来会执行一次跳转回执行一次,不过我觉得不太像。。希望有能人士指点。。:

watch: {
 '$route' (to, from) {
  this.httpGetUserInfo(); // 这是我ajax获取用户信息的方法
 }
 }
// 这样每次路由执行就会运行这个方法,第一次打开不会运行,你需要用created()方法来执行下ajax方法。

补充知识:vue页面跳转parmas传参之刷新页面参数丢失问题解决方法

说在前面:

今天遇到一个问题,通过vue的parmas传参,跳转到相应页面后,F5刷新传过来的参数就会消失。尝试改成query传参,但由于项目的路由不能带参数,不然刷新会找不到页面。百度了很长时间,尝试了很多次,最后找到了一个方法,记一下,以备以后需要。(主要是实在搞不懂vuex 感觉还是local storage好理解一些。。。)

1.utils文件夹下新建localstorage.js文件

解决VUE-Router 同一页面第二次进入不刷新的问题

2.在需要保存值的文件里引入localstorage.js并通过db.save进行保存数据

解决VUE-Router 同一页面第二次进入不刷新的问题

3.在跳转到的页面引入localstorage.js并通过db.get获取数据

解决VUE-Router 同一页面第二次进入不刷新的问题

以上这篇解决VUE-Router 同一页面第二次进入不刷新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript用户注册提示效果的简单实例
Aug 17 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
JS实现简单日历特效
Jan 03 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
js实现查询商品案例
Jul 22 #Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 #Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 #Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 #Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 #Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 #Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 #Javascript
You might like
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python实现拼接多张图片的方法
2014/12/01 Python
python实现多人聊天室
2020/03/31 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
学校后勤人员职责
2013/12/27 职场文书
无故旷工检讨书
2014/01/26 职场文书
如何撰写岗位职责
2014/02/01 职场文书
司法建议书范文
2014/05/13 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
创文明城市标语
2014/06/16 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
蓬莱阁导游词
2015/02/04 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
公司放假通知怎么写
2015/04/15 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
浅谈如何提高PHP代码的质量
2021/05/28 PHP