Как определить, что страница обновляется на VUE? - PullRequest
Новая
       45

Как определить, что страница обновляется на VUE?

1 голос
/ 22 октября 2019

Я пытаюсь так: 

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

сообщение вроде этого:

enter image description here

Если я нажму "Отмена", оно будетотмена

Если я нажму перезагрузить, страница перезагрузится. это перезагрузить до подробной страницы

Я хочу, когда пользователь нажимает кнопку перезагрузки, это перезагрузит страницу. но перезагружает страницу на домашнюю страницу

как я могу это сделать?

Обновление :

Мой роутер так: 

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

Ответы [ 2 ]

1 голос
/ 22 октября 2019

Вы можете добавить созданный хук жизненного цикла Vue в main.js, где записан новый экземпляр Vue.

Это правильное место, когда вы обновляете приложение, оно снова инициализируетполное приложение Vue.

Тем не менее, если вы используете go back или go forward в браузере или 

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

Код обновления: Что касается вопроса «Как обнаружить страницу при перезагрузке», приведенная выше логика работает нормально

Но если пользователь хочет запретить перезагрузку страницы и запрашивает подтверждение у пользователя перед обновлением или перезагрузкой страницы, нижеКод является ответом.

Приведенная ниже логика: если пользователь находится на странице 3 и пытается обновить или перезагрузить страницу, он запрашивает подтверждение пользователя и перенаправляет на домашнюю страницу (страницу 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() {
    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');
      }
    }
  }
})
0 голосов
/ 22 октября 2019

Это потому, что у вас, вероятно, есть СПА. Это означает, что JavaScript создает ваш сайт с вашими шаблонами, компонентами и т. Д. Каждый раз, когда вы обновляете свою страницу, она всегда обновляет ваш SPA и возвращает вас к началу. Если вы хотите остаться на том же сайте, вы должны взглянуть на маршрутизатор vue.js

...