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()邏輯。

參考地址

參考地址二