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

參考地址

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容