Question

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

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

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

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

此方法由一个按钮触发，该按钮会将this.listingFormActive更改为true或false。

然后我在组件的模板中有这个：

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

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

由于

Answer 1

它可行。在this page工作时，我和我的同事必须做类似的事情。

为了它的工作，

url是listingFormActive应该
listingFormActive的状态应该每次都存储在url中变化。
应检索listingFormActive的初始状态来自网址

首先，请注意listingFormActive。每次状态更改时，执行pushState将其状态存储为URL查询。

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

添加一些获取网址查询的实用工具方法

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的初始状态应该基于您在网址中保存的内容

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

使用浏览器后退按钮vue.js的状态历史记录

1 个答案: