使用浏览器后退按钮查看历史记录 vue.js

Question

我正在使用 Vue 和 Laravel 开发一个应用程序。Laravel 正在控制我的路线，但我没有使用vue-router.

我根据父组件数据中对象的状态有条件地加载一些组件。

我的父组件中有这个方法：

  activateListingForm: function() {
    this.listingFormActive = !this.listingFormActive;
  }

此方法由将更改为 true 或 false 的按钮触发this.listingFormActive。

然后我将其添加到组件的模板中：

  <transition name="slide-fade">
    <create-listing-form v-if="listingFormActive"></create-listing-form>
    <listings-table v-else></listings-table>
  </transition>

我遇到的一个问题是，一些用户单击浏览器后退按钮，期望加载最后一个组件。我想知道是否有办法根据后退按钮更改状态？

谢谢

Answer 1

这是可行的。我和我的同事在处理此页面时必须做类似的事情。

为了让它发挥作用，

• listingFormActiveurl 是 的值的真实来源
• 每次改变时，的状态都listingFormActive应该存储在 url 中。
• listingFormActive应从 url 检索的初始状态

首先，观看listingFormActive。每次状态改变时，执行pushState将其状态存储为url查询。

watch: {
    listingFormActive: {
        handler(v) {
            history.pushState({
                listingFormActive: v
            }, null, `${window.location.pathname}?listingFormActive=${v}`);
        }
    }
}

添加一些实用方法来获取 url 查询

methods: {
    currentUrlQuery() {
        return window.location.search
            .replace("?", "")
            .split("&")
            .filter(v => v)
            .map(s => {
                s = s.replace("+", "%20");
                s = s.split("=").map(s => decodeURIComponent(s));
                return {
                    name: s[0],
                    value: s[1]
                };
            });
    },
    getListingFormActive() {
        return this.currentUrlQuery().filter(obj => obj.name === 'listingFormActive').value;
    }
}

的初始状态listingFormActive应基于您在 url 中保存的内容

data() {
    return {
        listingFormActive: this.getListingFormActive() == 'true' ? true : false
    }
},