在Vuejs中離開頁面時如何在url路徑中保存頁碼

Question

我已經發布了幾次，並且在動態學習時總是與 vuejs 苦苦掙扎。

我創建了一個列出文章/博客文章的頁面，然后對其進行了分頁。 當您單擊第 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 ]
   }
 }