前言

     小编最近在新搭建的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官网,多了解一些常用的方法,对于项目开发会有很大的帮助。

                                                                          感谢您的访问!

Logo

前往低代码交流专区

更多推荐