如何检测页面在vue上刷新？

Question

我尝试这样：

created() {
      window.addEventListener('beforeunload', function(event) {
         event.returnValue = 'Write something'
         this.$router.push('/')
      })
    },

像这样的消息：

如果我点击取消，它会取消

如果我单击重新加载，它将重新加载页面。它重新加载到详细信息页面

我希望当用户单击重新加载按钮时，它将重新加载页面。但将页面重新加载到主页

我该怎么做？

更新：

我的路由器是这样的：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
...

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    ...
  ]
})

我的环境：dev

我的项目正在使用 vuetify

Answer 1

您可以将创建的Vue 生命周期钩子添加到写入新 Vue 实例的 main.js 中。

这是正确的位置，当您刷新应用程序时，它会再次重新初始化完整的 Vue 应用程序。

如果您在浏览器中使用“后退”或“前进”，或者

this.$router.go(-1)

不被视为刷新，vue应用程序的状态被保留

像这样使用，这里的 page3 是浏览器当前页面，如果你想刷新，它会提示确认或重新加载此站点。如果是，它会重新加载到主页（第1页），否则它会停留在同一页面

在main.js中

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
  created() {
    if (performance.navigation.type == 1) {
      if(this.$route.path == '/page3') {
        if (confirm('Reload site?. Change you made may not be saved.')) {
          this.$router.push({path: '/page1'})
        } else {
          console.log('reload page now');
      }
    }          
   }
  }
})

更新代码： 根据问题如何检测页面重新加载，上述逻辑工作正常

但是，如果用户想要阻止页面重新加载，并在刷新或重新加载页面之前要求用户确认，下面的代码就是答案。

以下逻辑是，如果用户在 page3 中尝试刷新或重新加载页面，则提示用户确认并重定向到主页（page1），如果用户取消刷新，则不会重新加载并保留页面的状态页

在main.js中

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
  created() {
    var self = this;
    window.onbeforeunload = function (e) {
      if(self.$route.path  == "/page3") {
        e = e || window.event;
        //old browsers
        if (e) {e.returnValue = 'Changes you made may not be saved';}
        //safari, chrome(chrome ignores text)
        return 'Changes you made may not be saved';
      } else { 
        return null;
      }
    };
    if (performance.navigation.type == 1) {
      if(this.$route.path == '/page3') {
          this.$router.push({path: '/page1'})
        } else {
          console.log('reload page without redirect');
      }
    }
  }
})