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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 Javascript
Vue自定义表单内容检查rules实例
Oct 30 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实现下载限制速度示例分享
2014/02/13 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python出现segfault错误解决方法
2016/04/16 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
java判断三位数的实例讲解
2019/06/10 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python文件排序的方法总结
2020/09/13 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
赔偿协议书范本
2014/04/15 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
音乐剧猫观后感
2015/06/04 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP