【前端】vue2 页面路由跳转后不重新加载

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/90347113

前言

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

                                                                          感谢您的访问！