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

Question

I try like this:

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

the message like this:

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

how can i do it?

Update :

My router like this:

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

My environment: dev

My project is using vuetify

Answer 1

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

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

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

this.$router.go(-1)

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

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

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.

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

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

Answer 2

vuejs forum: https://forum.vuejs.org/t/how-to-detect-a-page-reload-to-avoid-loss-of-in-memory-data-and-redirect-user-after-asking-what-to-do/45255/2

hope this can help you

Answer 3

Its because you probably have a SPA. That means that JavaScript is building up your website with your templates, components etc. Whenever you refresh your page it will always refresh your SPA and lead you back to beginning. If you want to stay on the same site you should take a look about vue.js router