javascript - 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
    },
    ...
  ]
})

我的环境:开发

我的项目正在使用 vuetify

Answer 1

您可以将Vue生命周期的created钩子(Hook)添加到编写新Vue实例的main.js中。

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

如果您在浏览器中使用后退或前进或

this.$router.go(-1)

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

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

In 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');
      }
    }          
   }
  }
})

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

But if a user wants to prevent the page from reload and asks for confirmation from user before refresh or reload page, below code is the answer.

下面的逻辑是，如果用户在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');
      }
    }
  }
})