vue 頁面返回 重新獲取數據

1、方法一：Vue利用visibilitychange監聽頁面顯示和隱藏 

mounted() {

　　document.addEventListener(' visibilitychange', _this.handleVisiable)

},

destroyed() {

　　document.removeEventListener('visibilitychange', _this.handleVisiable)

},

methods: {

  handleVisiable(e) {

    if (e.target. visibilityState === 'visible') {

    // 要執行的方法

    }

 }

}

ps：記得清除監聽

 

參考地址： https://blog.csdn.net/qq_29180565/article/details/110651535

 

2、方法二:router的meta 添加變量 isBack 

routes: [
    {
      path: '/reply',
      name: 'Reply',
      component: Reply,
      meta: {
        title: 'reply',
        keepAlive: true,
        isBack: false
      }
    },
]

vue 頁面獲取變量

beforeRouteEnter(to, from, next) {
    if (from.name == 'ReplyDetail') { // 這個name是下一級頁面的路由name
        to.meta.isBack = true; // 設置為true說明你是返回到這個頁面，而不是通過跳轉從其他頁面進入到這個頁面
    }
    next()
},

activated() {
    if (this.$route.meta.isBack) {
       // 頁面返回之后的處理
    }
    this.$route.meta.isBack = false //請求完后進行初始化
},