vue如何检测页面刷新? [英] How to detect page is refreshed on vue?

问题描述

我是这样尝试的:

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

这样的消息:

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

If I click cancel, it will cancel

如果我点击重新加载，它会重新加载页面.它重新加载到详细信息页面

If i click reload, it will reload the page. it reload to detail page

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

I want when the user clicks the reload button it will reload the page. but reloads the page to the home page

我该怎么做?

更新:

我的路由器是这样的:

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

My project is using vuetify

推荐答案

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

You can add created hook of Vue life cycle to the main.js where new Vue instance is written.

这是正确的地方，当您刷新应用程序时，它会再次重新初始化 Complete Vue 应用程序.

It is the right place, when you refresh the application it again reinitializes the Complete Vue application.

如果你在浏览器中使用 go back 或 go forward 或者

Still if you use go back or go forward in browser or

this.$router.go(-1)

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

It is not consider as refresh, the state of vue application is preserved

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

Use like this, here page3 is the browser current page and if you want ton refresh, it prompts a confirm ro reload this site. If Yes, it reloads to home(page1) else it stays in same page

在 main.js 中

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

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

Update code: As per the question, How to detect page from reload, the above logic works fine

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

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)，如果用户取消刷新，则不会重新加载并保留页面状态

The below logic is, if the user is in page3 and trying to refresh or reload the page, it prompts for user confirmation and redirect to home page(page1), if user cancels the refresh, it will not reload and reserve the state of the page

在 main.js 中

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

这篇关于vue如何检测页面刷新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！