解决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 相关文章推荐
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
js实现简单的验证码
Dec 25 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
Node 模块原理与用法详解
May 13 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
用Eclipse写python程序
2018/02/10 Python
Django CBV类的用法详解
2019/07/26 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
python os.listdir()乱码解决方案
2021/01/31 Python
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
商学院大学生求职的自我评价
2014/03/12 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
5行Python代码实现一键批量扣图
2021/06/29 Python
nginx请求限制配置方法
2021/07/09 Servers
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
i7 6700处理器相当于i5几代
2022/04/19 数码科技