Vue 路由切换时页面内容没有重新加载的解决方法


Posted in Javascript onSeptember 01, 2018

第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新。

问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用。后来发现App.vue中使用了<keep-alive>:

<template>
 <div id="app">
 <keep-alive>
  <router-view></router-view>
 </keep-alive>
 </div>
</template>

keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。这就是问题所在了。

解决办法:

使用Vue组件切换过程钩子activated(keep-alive组件激活时调用),而不是挂载钩子mounted:

<script>
export default {
 // ...
 activated: function() {
 this.getCase()
 }
}
</script>

关于keep-alive组件的钩子:https://cn.vuejs.org/v2/api/#activated

Vue 路由切换时页面内容没有重新加载的解决方法

以上这篇Vue 路由切换时页面内容没有重新加载的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 #Javascript
vue router 跳转后回到顶部的实例
Aug 31 #Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 #Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 #Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 #Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 #Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 #Javascript
You might like
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
js 代码优化点滴记录
2012/02/19 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
Javascript中Array用法实例分析
2015/06/13 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
Python中不同进制的语法及转换方法分析
2016/07/27 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
python requests post多层字典的方法
2018/12/27 Python
python打开windows应用程序的实例
2019/06/28 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
保证书格式范文
2014/04/28 职场文书
初中新生军训方案
2014/05/13 职场文书
转让协议书
2015/01/27 职场文书
公司员工辞职信范文
2015/05/12 职场文书
焦裕禄观后感
2015/06/03 职场文书
金砖之国观后感
2015/06/11 职场文书
读书笔记格式
2015/07/02 职场文书
欠条格式范本
2015/07/03 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python