How to detect page is refreshed on vue?

I try like this :

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

the message like this :

enter image description here

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

2 answers

  • answered 2019-10-21 23:38 Ifaruki

    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

  • answered 2019-10-22 02:27 chans

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