vue.js - Vue：记住最后一页的状态

Question

我有一个 Vue 应用程序，其中一些页面在显示页面的列表下有一个分页组件。

+------------------+            +------------------+            +------------------+
| Item 1 page 3    |            |                  |            | Item 1 page 3    |
+------------------+            | Details item 2   |            +------------------+
| Item 2 page 3    | - click -> |                  |      +-->  | Item 2 page 3    |
+------------------+            | page 3           |      |     +------------------+
| Item 3 page 3    |            |                  |      |     | Item 3 page 3    |
+------------------+            +------------------+      |     +------------------+
                                       _____              |
  < 1 2 3 ... 10 >                    |Back | -------- click      < 1 2 3 ... 10 > 
        ^                                                               ^                                             
                                                    

用户可以点击其中一个页面（1, 2, 3, ...），当页面呈现给用户时，它可以点击页面的一个项目并访问该项目的详细信息。当用户从详细信息返回到分页组件时，我想记住他正在访问的分页页面。（在其他情况下我实际上需要这个，但分页更容易解释）。

我现在做的是有两个 cookie：lastPage 和 detailsS​​elected。lastPage 在用户选择页面时设置（默认为 1），而 detailsS​​elected 在选择详细信息时设置为 true。当我创建包含分页的页面时，我会检查这些 cookie：

data() {
     return {
         p : 1,
     }
},
mounted() {
    if (this.detailsVisited && this.lastPage) {
        this.p = this.lastPage
        this.unsetExerciseDetailsVisited()
    }
}

所以，如果我们是从细节来的，那么我们将 currentPage 设置为 lastPage，否则它会得到默认的第 1 页。

老实说，我不喜欢这样。我正在考虑创建一个堆栈组件以供需要具有状态的页面使用，但我想知道是否已经有更简单的解决方案。

谢谢

标签： vue.js