【前端】vue2 页面路由跳转后不重新加载
前言小编最近在新搭建的vue2.0的框架中,发现页面路由跳转后,不会重新加载,遇到这个问题,小编想到了vue的生命周期中,有几个钩子方法可以使用,通过上网查询了解,找到了可以使页面路由跳转后可以重新加载页面的钩子方法。调用方法重新渲染页面一、使用activated()钩子方法<script>export default {// ...a...
·
前言
小编最近在新搭建的vue2.0的框架中,发现页面路由跳转后,不会重新加载,遇到这个问题,小编想到了vue的生命周期中,有几个钩子方法可以使用,通过上网查询了解,找到了可以使页面路由跳转后可以重新加载页面的钩子方法。
调用方法重新渲染页面
一、使用activated()钩子方法
<script>
export default {
// ...
activated: function() {
this.getCase()
}
}
</script>
二、原因
1.mounted()方法是挂载钩子,如果使用mounted()钩子方法,需要修改一个Vue的内置组件keep-alive,才能正常渲染DOM。
检查项目中,在路由跳转需要进行拦截判断的页面中使用了keep-alive组件:
<Content :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
<keep-alive>
<router-view/>
</keep-alive>
</Content>
2.keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
关于keep-alive组件的具体内容,地址:https://cn.vuejs.org/v2/api/#activated
小结
通过这次的经历,小编对于vue中的一些方法有了进一步的认识,多看vue官网,多了解一些常用的方法,对于项目开发会有很大的帮助。
感谢您的访问!
更多推荐
已为社区贡献3条内容
所有评论(0)