vue_页面跳转实时刷新

vue组件和组件间使用router跳转的时候，除了首次实例化会加载数据，第二次进组件的时候，是不会再次实例化组件的，也就是调用的缓存，不能实时刷新组件。

涉及知识点：

created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；

activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等；

beforeRouteEnter(to, from, next)：进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。

<template>
</template>
<script>
export default {
    data() {
      return {}
    },
    activated(){
        if (this.$route.meta.isFresh) {
            init();
        }else{}
      this.$route.meta.isFresh = false;//记得这里一定要设置一下false。
    },
    methods:{
        init(){},
    },
    beforeRouteEnter(to, from, next) {
      if (from.name == 'Index') {
        to.meta.isFresh = true;
      }
      next();
    }
}

</script>
<style>
</style>

也就是说，每次进入组件都会进入beforeRouteEnter()和activated()，在这两个钩子函数定义初始化init()逻辑。

参考地址

参考地址二