如何在 Vuejs 中离开页面时将页码保存在 url 路径中

Question

我已经发布了几次，并且在学习过程中一直在与 vuejs 作斗争。

我创建了一个列出 articles/blog 个帖子的页面，然后对其进行了分页。当您单击第 2 页时，我有 url 更改以显示您在第 2 页。我遇到的问题是，如果您单击第 2 页上的一篇文章，然后按返回键或单击我添加到文章中的按钮带你回到文章列表，它不保存页码。现在，我知道我将默认的“currentPage”设置为 1，但我不知道如何设置它所以它不会获取默认值。我的所有代码都在一个页面中，而不是一个完整的 vue 应用程序。

const routes = [
   {
     name: 'news',
     path: '/:currentPage',
     component: vueApp
   }
]
    
 const router = new VueRouter({
     routes
 })
    
 var vueApp = new Vue({
    router,
    el: '#news-wrapper',
    data: function data() {
      return {
        filteredArticles: [],
        timer: null,
        currentPage: 1,
        perPage: 10,
        pages: [],
        articles: [ array ]
   }
 },
 updated: function updated() {
    var page = this.currentPage;

    this.$router.replace({ name: 'news', params: {currentPage: this.currentPage}})
}

如您所见，我让路由器抓取了 currentPage，它也在我的数据集中设置为 1。我需要创建一个新值吗？我需要它保存我所在的页面，即使我离开页面并返回，甚至只是刷新页面。任何帮助将不胜感激。

如果您需要我的更多代码，请告诉我！

Answer 1

如果currentPage的初始值设置为url中的值，则问题可以解决。那么如何设置初始值呢？

这是我的方法。

 var vueApp = new Vue({
   router,
   el: '#news-wrapper',
   data: function data() {
     return {
       filteredArticles: [],
       timer: null,
       currentPage: this.$route.params.currentPage || 1,
       perPage: 10,
       pages: [],
       articles: [ array ]
   }
 }

如何在 Vuejs 中离开页面时将页码保存在 url 路径中

How to save page number in url path when leaving page in Vuejs

javascript

vue.js

vue-router