解决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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
海量经典的jQuery插件集合
Jan 12 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
Vue实现菜单切换功能
Nov 08 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
php利用反射实现插件机制的方法
2015/03/14 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
奇妙的js
2007/09/24 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python set集合类型操作总结
2014/11/07 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
django admin组件使用方法详解
2019/07/19 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
Linux如何为某个操作添加别名
2015/02/05 面试题
销售类个人求职信范文
2013/09/25 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
团队经理竞聘书
2014/03/31 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
订货会主持词
2015/07/01 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
pytorch 如何使用float64训练
2021/05/24 Python