Maintain the state of the previous page in Vue to ensure continuity

Currently in the process of creating a small PWA to simulate an Android app, I have discovered Vuejs.

However, I encountered an issue that has proven difficult to resolve. While scrolling through lists on the homepage for movies, TV shows, or news, clicking on an item resets the scroll position upon returning. Is there a way to retain the scroll position so users can easily navigate back to the same spot?

I've experimented with the keep-alive property but am struggling to grasp its functionality. Here is how my app page currently appears. I employ :key="$route.fullPath" to refresh the detail page when moving from one movie to another.

<div id="content">
  <keep-alive>
    <transition :name="transitionName" mode="out-in">
      <router-view :key="$route.fullPath"></router-view>
    </transition>
  </keep-alive>
</div>

<div class="bottom">
  <div class="bottom-bar">
    <md-bottom-bar md-type="shift" md-sync-route>
      <md-bottom-bar-item id="bottom-bar-item-movies" md-label="Movies" to="/movies"
                          md-icon="movie"></md-bottom-bar-item>
      <md-bottom-bar-item id="bottom-bar-item-tvshows" md-label="TV Shows" to="/tvshows"
                          md-icon="tv"></md-bottom-bar-item>
      <md-bottom-bar-item id="bottom-bar-item-watchlist" md-label="News" to="/news"
                          md-icon="language"></md-bottom-bar-item>
    </md-bottom-bar>
  </div>
</div>

A detail page includes a route indicating the type and specific ID, such as /movies/348350. The page contains a button for navigating back using this.$router.go(-1).

Have I overlooked a simple solution to this issue?

javascriptvue.jsvuejs2progressive-web-apps

Answer №1

As stated in the documentation, the proper placement for <keep-alive> is shown below:

<transition :name="animationName" mode="in-out">
  <keep-alive>
    <router-view :key="$route.path"></router-view>
  </keep-alive>
</transition>

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

working with the express locals function

I've been trying to come up with a function that can access local variables, such as this one: // Retrieve user data by ID res.locals.findUser = function(user_id) { models.user.findOne({ '_id': user_id }, function(err, user) ...

javascriptnode.jsexpresspug

Integrate data from Firebase into a React-Table component

I am currently working on a table component that fetches data from Firebase to populate three fields: Name Date Comment For each entry, I want to add a new row. The pivot has been successfully added. However, when trying to populate the table, I am encou ...

javascriptreactjsaxiosreact-table

Guide to generating dynamic arrays in JavaScript when a button is clicked

I am working on a JavaScript program where I dynamically generate buttons and div tags, as well as retrieve data from a local JSON file. My goal is to implement a new feature where clicking a button will create an array with the same name as the button, al ...

javascripthtmlbootstrap-4

Creating Multiple Choice Forms in React: A Guide to Implementing Conversational Form

I've been exploring React (Next.js) and I came across an interesting example of how to use multiple choice in simple HTML on Codepen ([https://codepen.io/space10/pen/JMXzGX][1]). Now I'm curious about how to implement a similar functionality in R ...

javascriptreactjsnext.jschatbot

The jQuery Select2 Plugin for Dynamic Dropdowns with Ajax Integration

Utilizing the Select2 plugin with Ajax to connect to my employee database has been quite helpful. It allows setting up a meeting and selecting all the employees you wish to invite. Here is an example of the code: $("#requiredAttendees").select2({ ...

javascriptjqueryajaxjsonjquery-select2

Exploring the contrasts in values within the ng-repeat directive of AngularJS

I am currently working with a JSON object that contains information about various clients, including the payments made over different date ranges within each month. My goal is to loop through this list of customers and display a table for each customer, hi ...

javascriptangularjsjsonangularjs-ng-repeat

Access to an Express route in Node JS can only be granted upon clicking a button

Is it feasible to create an express route that can only be accessed once a button is clicked? I want to prevent users from entering the route directly in the URL bar, and instead require them to click a specific button first. I'm curious if this can b ...

javascriptnode.jsexpressroutes

Javascript - Single line conditional statement

As I continue to improve my JavaScript skills, I'm looking for guidance on optimizing the following if statement. Is there a way to shorten it, possibly even condense it into one line? How can I achieve that? onSelect: function (sortOption) { th ...

javascriptvue.jsif-statementecmascript-6

Display endless data within a set window size

I am looking to create a fixed-size window for displaying text from the component <Message/>. If the text is longer, I want it to be scrollable within the fixed window size. See screenshot below: Screenshot export default function AllMessages(){ ...

javascriptcssreactjs

Unable to include checkout and clear cart buttons in popover within bootstrap 5

I am currently working with BootStrap version 5.0.0 beta-2 and facing an issue when attempting to dynamically add a button within my popover. I have ensured that the scripts are included in the following order: <script src="https://ajax.googleapis. ...

javascriptjquerydjangobootstrap-5bootstrap-popover

Issue with long text in a resizable table using jQuery tablesorter 2.31.1

My issue is that when I try to resize the columns in tablesorter, they snap back into place. The column width set with resizable_widths does not apply correctly until a column is manually resized. Despite setting the width of all cells to 120px, any cells ...

javascriptjqueryhtmlcsstablesorter

The ASP.NET MVC3 form collection registers as 0 when performing a jQuery ajax post

I'm currently developing a project on ASP.NET MVC3. My current challenge involves POSTing to a method that should return a set of data using the jQuery.ajax api. However, upon handling the request on the server, I noticed that the form collection&apo ...

javascriptjqueryasp.netajaxasp.net-mvc

Is there a way to assign innerHTML values to table cells using PHP?

I'm currently building a website that relies on a database to store information. I have created an array to hold the values retrieved from the database, and now I need to populate a table with these values. Each cell in the table has a numerical ID ra ...

javascriptphphtml

Experiencing an issue where the canvas element fails to render on mobile Chrome browser,

I've encountered an issue with a script that draws a canvas based on the background color of an image. The image is loaded dynamically from a database using PHP. The responsive functionality works fine on mobile Safari, but not on Chrome. When the re ...

javascriptjquerycsshtmlcanvas

Bringing in functions - NodeJS - non-HTML

Currently, I am in the process of learning automation for my job and have hit a roadblock. In times like these, stackoverflow has proven to be a life-saving resource :) My current task involves writing a Selenium test in VisualStudio using JavaScript (nod ...

javascriptnode.jsseleniumvisual-studio-2017

ES6 module import import does not work with Connect-flash

Seeking assistance with setting up connect-flash for my nodejs express app. My goal is to display a flashed message when users visit specific pages. Utilizing ES6 package module type in this project, my code snippet is as follows. No errors are logged in t ...

javascriptnode.jsexpresses6-modulesconnect-flash

Issue in JavaScript / D3.js: When button is clicked, data fails to update and instead new positions are plotted

When the user clicks a button, both the red woman (unvaccinated) and the blue woman (vaccinated) should be updated to reflect the new value. At present, when the button is clicked, the red woman updates correctly but the blue woman is recreated in the loca ...

javascriptd3.jssvgappendbar-chart

"Function.click operates successfully when no arguments are given, but encounters issues when arguments are supplied

I had a function that was functioning correctly: $('#buttFurniture').click(onFilterCLick); However, when I decided to pass arguments to the function, it stopped working: $('#buttFurniture').click(onFilterCLick(arrOutput, arrFurniture ...

javascriptjqueryhtmlarrays

Updating the AngularJS view following a deletion process

I have a web application developed using AngularJS and Rails that carries out RESTful operations like create, read, and delete. After deleting an item, I need to refresh the page and update the view asynchronously. However, I am facing challenges in imple ...

javascriptruby-on-railsangularjs

Using dynamic imports in Next.js allows us to efficiently load modules based on variables defining the path

When utilizing dynamic import in Next.js, I am encountering an issue. The component renders successfully when the path is used directly, but fails to render when the path is accessed from a variable. const faq = dynamic(() => import('../faq/faq&apo ...

javascriptreactjsnext.js