Question

我有一个页面，用户在其中收藏一本书，该书使用ajax（axios）更新数据库，并显示一个图标，指示该书已被收藏。用户单击链接以查看其收藏的书籍的列表。通过按浏览器中的“后退”按钮，用户可以返回自己喜欢的书。

预期的行为是用户将看到表示该书已被收藏的图标，但是除非他们重新加载该页面，否则他们会看到初始页面状态（该书尚未被收藏）。

当用户单击“后退”按钮时，如何使页面显示正确的历史记录状态？

<template>
  <button v-if="userHasBook(book.id)" v-on:click="removeFromFavourites">
    <span>Remove</span>
  </button>
  <button v-else v-on:click="addToFavourites">
    <span>Add</span>
  </button>
</template>

<script>
export default {
    props: ['user', 'book'],
    data: function() {
        return {}
    },
    methods: {
        userHasBook(book_id){
            let $this = this;
            for (let book of $this.user.books){
                if (book.id === book_id){
                    return true;
                }
            }
            return false;
        },
        removeFromFavourites(){
            let $this = this;
            $this.busy = true;
            $this.updateUserFavourite();
        },
        addToFavourites(){
            let $this = this;   
            $this.updateUserFavourite();
        },
        updateUserFavourite(){
            let $this = this;
            axios.put(`/api/books/user/${$this.user.id}/book/${$this.book.id}`).then(function(response){
                    $this.user.books = response.data;
                }).catch(function(){
            });
        },
        getUserBooks(){
            let $this = this;
            axios.get(`/api/books/user/${$this.user.id}`).then(function(response){
                $this.user.books = response.data;
            });
        }
    },
    mounted: function() {
        let $this = this;
        $this.getUserBooks();

    }
}
</script>

Answer 1

我每次运行updateUserFavourite方法时都使用History API处理URL来解决此问题。这是供参考的代码：

{
updateUserFavourite(){
            let $this = this;
            axios.put(`/api/books/user/${$this.user.id}/book/${$this.book.id}`).then(function(response){
                    $this.user.books = response.data;
                    $this.updateUrl(response.data);
                }).catch(function(){
            });
        },
updateUrl(data){
            if (history.pushState) {
                var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?t=' + data.length  ;
                window.history.pushState({path: newurl}, '', newurl);
            }
        }
}

按下浏览器后退按钮后，带有ajax更新的页面无法记住状态

1 个答案: