Tips for retaining page number in URL path upon exiting page in Vuejs

Struggling with Vue.js while learning on the fly. I've created a page that lists articles and paginated it. However, when clicking on an article on page two and then trying to go back or return to the list, the page number doesn't save. How do I ensure it remembers the correct page even after leaving the page? Appreciate any help!

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}})
}

Need assistance in ensuring the page number is saved when navigating back to the list. Should I create a new value for this purpose?

Please let me know if you require more of my code!

Answer №1

To resolve the issue, we can simply set the initial value of currentPage using the value from the URL. But how do we go about setting this initial value?

Let me share my approach with you.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the realms of development and production with Next JS and Vercel

I've recently developed a movie database application using Next JS to explore its functionality. This app allows users to create, read, update, and delete data in Firebase by utilizing the API endpoints provided by NextJS. While the app works smoothl ...

State of an array has been modified

After toggling the state of a checkbox from true to false, calling setState does not immediately reflect the update on the screen. Instead, another element with state must be interacted with in order to trigger a refresh and display the new value of the ch ...

The functionality ceases to operate properly once a new element has been added

I am encountering an issue with the "click" action on a newly created element through a jQuery function, as it is not functioning properly. To demonstrate this problem, I have set up a JSFiddle at the following link (JSFiddle), however, please note that t ...

Calculating the total of jqgrid columns in the footer row can be done effortlessly using local calculations

Once I've displayed my database in jqGrid, I want to include a summary footer row that calculates the total for a specific column. The jqGrid is being populated locally and I have also added a filter to allow users to filter the data as needed. Howeve ...

Passing a variable from a service to a controller in AngularJS

I recently developed a basic app that includes user authentication based on the guidelines found in this useful resource. The core components of my app are a userAccountService, which manages communication with the server, and a login controller that over ...

How to declare WinJS.xhr as a global variable in a Windows 8 Metro app

Currently, I am developing a Windows 8 Metro app and facing an issue with a hub page. The problem arises when pushing data dynamically from an XML API using two WinJs.xhr("url") calls; one for headings and the other for section datas. When merging both W ...

displaying a Google Map within a designated container

I'm currently working on a basic website layout that consists of a full-width banner, a left menu (200px), and right content (600px). I have a simple jQuery script set up to load the content on the right-hand side when any of the five menu items are c ...

Can a hybrid app be created using React-Native, Vue.js, and Laravel all together?

Can a hybrid Native App be developed using React-Native, Vue.js, and Laravel together? Laravel (Backend) Vue.js (Front-end Javascript) React-Native (Native App support for iOS and Android) Would there be any challenges or conflicts when combining Vue.js ...

Automatically updating quantity with the power of jQuery

I have created a spreadsheet where users can input their expenses and the total will update automatically. Initially, I have set some default numbers in my HTML which are editable for users to modify as needed. However, I am facing an issue with my JQuer ...

I'm struggling to update a value in my view with Angularjs and Socket.io. It seems impossible to

In order to master AngularJS and NodeJS, I am embarking on creating a chatroom project. Everything seems to be functioning smoothly with Angular controllers and sending data to my NodeJS server using socket.io. However, I have encountered a problem: When m ...

Encountering difficulties in populating mongoose document following a model query

Hi everyone, this is my first time posting on SO so I'm hoping for some positive outcomes. I've been using Mongoose in a current project without any issues until now. The problem arises when trying to populate object references after querying fo ...

The note-taking app's JavaScript code does not currently have the capability to store notes in local storage

const noteContainer = document.querySelector(".note-container"); const createBtn = document.querySelector(".btn"); let notes = document.querySelectorAll(".input-box"); function showNotes() { noteContainer.innerHTML = localS ...

Troubleshooting Azure typescript function: Entry point for function cannot be determined

project structure: <root-directory> ├── README.md ├── dist ├── bin ├── dependencies ├── host.json ├── local.settings.json ├── node_modules ├── package-lock.json ├── package.json ├── sealwork ...

Obtaining data from a database using json_encode via ajax

Recently, I encountered an issue while using AJAX to fetch data from a database. I decided to use an alert(valData) in the success function to test the data, but unfortunately, nothing was returned from the AJAX call. Curiously, the SQL query I tested dire ...

Differences between HTML and JSON in the context of Google Apps Script

In my Google Apps Script web app, I'm fetching restaurant data (name, address, phone, etc.) from Google Sheet and displaying it on my website using AJAX. Currently, the data is being converted into HTML within Google Apps Script, but I'm looking ...

JavaScript: How to Build a Digital Grocery List with Browser Storage

Struggling with a tough exercise question, I could use some help deciphering it. https://i.stack.imgur.com/V5he2.png Here is how I've started the code: <!DOCTYPE html> <html> <head> <title></title> <script> fun ...

The issue persists with inserting dynamic input fields into two separate MySQL tables alongside non-dynamic input fields

I am facing an issue with inserting data into two tables in the database Table 1 - Orders - id -Primary Key - name - date Table 2 - Products - product_id - Primary Key - product - id - Foreign Key There are three input fields, Name, Date, and Pr ...

The button remains stationary when it is clicked

After creating a button that should move to a random position upon being clicked, I encountered an issue with the document.style.top property not functioning as expected. I have already created two variables for height and width to generate random values, ...

What are some creative ways to customize v-slot:cell templates?

Currently, I have the following code snippet within a table: <template v-slot:cell(checkbox)="row" style="border-left='5px dotted blue'"> <input type="checkbox" v-model="row.rowSelected" @input="toggleS ...

Implement a vertical bar to appear next to the tree view when it is expanded

I am struggling to implement a vertical line for the first level of list items when they are expanded and remove it when they are closed. I have tried using li::after but it doesn't seem to work. Can someone provide guidance on how to achieve this? T ...