在没有 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 的浏览器相关的 vue 中的一个已知错误， 这里是有关它的更多信息。 要在不重新加载页面的情况下解决此问题，您需要像这样在 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();
}