使用不带vue-router的Vuejs收听onpopstate

Question

我使用带有laravel的vue.js，并且使用带有laravel刀片文件的vue组件。当我按下后退导航按钮转到上一页时，我想重新加载该页。我有这个代码的目的：

created() {
       window.onpopstate = function(event) {
       location.reload();
    };

这不管用。我可以使用浏览器的后退按钮返回，但没有重新加载。我怎样才能达到这个效果呢？再说一次，我没有使用vue-router。我使用laravel的路径加载刀片文件，刀片文件包含vue文件。刀片文件：

@extends('layouts.app')
@section('content')
  <vue-component></vue-component>
@endsection

Answer 1

我假设您的问题是浏览器在后退按钮上保持状态。这是一个与基于chrome的浏览器here is more info about it相关的已知错误。要在不重新加载页面的情况下解决此问题，您需要在pageshow事件中初始化Vue，如下所示：

const initVue = () => {
    return new Vue({
        el: '#app',
        store
    });
   }
    const app = window.addEventListener('pageshow', () => {
        initVue();
    })

但是要在Safari中解决这个问题，你必须重新加载页面(在你的主布局刀片中应用它)。

  (function () {
            window.onpageshow = function (event) {
            if (event.persisted) {
                window.location.reload();
                }
            };
        })();

或者，如果你真的想通过在使用后退按钮时重新加载页面来解决这个问题，那么你需要为你的组件使用一个这样的方法，或者你可以在你的主布局刀片中使用它来将它应用到任何地方：

methods: {
    checkBackButton: function() {
            if (
                window.performance &&
                window.performance.navigation.type ===
                    window.performance.navigation.TYPE_BACK_FORWARD &&
                this.type === "main"
            ) {
                window.location.reload();
            }
        }
},

mounted() {
   this.checkBackButton();
}