Navigating through Vue tabs with history tracking

Greetings to the community of Vue developers! I am encountering a problem and I am hopeful that you can offer assistance. I will be presenting three different states within my structure.

State: '/tab1' https://i.sstatic.net/EpvRy.jpg

State: '/tab1/item1' https://i.sstatic.net/W1nZJ.jpg

State: '/tab2' https://i.sstatic.net/fFkil.jpg

As seen in the structure above, it follows the typical list/item format. The issue arises as this is a Single Page Application (SPA) embedded within a web app for iOS and Android (simulating an app). When a user navigates from 'tab1/item1' to 'tab2', and then clicks back to 'tab1', internally there should be a return to 'tab1/item1' rather than reloading the page. Is there a pre-existing solution or structure that addresses this? My initial thoughts were to utilize multiple views within each tab instead of one main view for all. Another consideration was removing views and using a parent component. Any insights or assistance on this matter would be greatly appreciated. Thank you!

Answer №1

One potential solution could involve storing the selected item for each tab upon leaving the page, and then retrieving that information when the user returns to the tab.

Implementing a back history feature is another option, although it would require the user to press the back button instead of switching tabs. As of now, there isn't an existing structure that perfectly fits your requirements.

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

Add exclusively fresh entries to the Vue JS table

In my database table, new records are inserted every 10 seconds. Using Vue and Axios, I am displaying the latest 20 records to the user in an HTML table. In the created hook, I have implemented a method that fetches data every 5 seconds. window.setInter ...

What is the process for integrating the neo4j-graphql library into a GraphQL API?

I am currently working on building a GraphQL API and have set up dummy data for testing purposes. My next step is to connect this GraphQL API to a Neo4j database using the neo4j-graphql library. Can anyone provide guidance on how to establish this connecti ...

Perform the same actions on every element within the ul li

I'm facing an issue with my unordered list, where each list item contains a span element with an image inside. My goal is to set the background-image of each span to be the same as the image it contains, while also setting the opacity of the image to ...

Substitute the nested object's value with a variable structure

I have an object structured like this: const obj = {a: {x: 0, y: 0}} but it can also be structured like this: const obj = {a: {x: 0, y: 0}, b: {x: 10, y: 3}, abcd: {x: -1, y: 0}} This means that the obj can contain multiple keys with variable key names. ...

Is it possible to use node.js and express in an application to redirect a URL and eliminate a file extension from the previous website?

We are in the process of transitioning our website from an ASP environment hosted on a Windows server. The current URL is http://www.bruxzir.com/video-bruxzir-zirconia-dental-crown/index.aspx However, I would like it to be http://www.bruxzir.com/video ...

AngularJS $routeProvider not working as expected

Today marks the beginning of my journey with AngularJS, and I'm facing a roadblock in the "routing" aspect. I've successfully created a controller and a view (refer below), but upon attempting to run it on my local server, an error pops up: Unca ...

How can I embed certain returned values into JavaScript for display on a webpage using PHP's PDO?

I recently started learning about MVC and I'm working on retrieving an array of image paths from a MySQL database to create a grid using JavaScript. The controller needs a model that can fetch the paths from the database. Before, I had an ajax call ...

Executing a function in C# using JavaScript

Currently, I am utilizing selenium's RemoteWebDriver along with c#. At the moment, I am inserting a javascript function into the head of a page that has the following structure: "window.__webdriver_javascript_errors = []; window.onerr ...

Use CSS to position the SVG element to the bottom right corner of the screen

I have a <div> on the page with the CSS class .svgImage applied to it. Whenever I resize the browser window, the svg image resizes correctly but keeps shifting its position on the page. When I make the browser window vertically smaller, the svg imag ...

Executing the Javascript function specified above upon the page being loaded

I'm fairly new to JavaScript, so please bear with me. I've got a JavaScript function on my page: <script type="text/javascript"> Sys.debug = true; var popup; Sys.require(Sys.components.popup, function () { popup = Sys.c ...

Redirecting to a specific mobile page using Javascript

I'm looking for a way to redirect users to different versions of my website based on their browser size. Currently, I have the following script in place: <script> if (screen.width <= 1024) window.location.replace("http://www.website.com/") e ...

Ways to pass data to a different module component by utilizing BehaviourSubject

In multiple projects, I have used a particular approach to pass data from one component to another. However, in my current project, I am facing an issue with passing data from a parent component (in AppModule) to a sidebar component (in CoreModule) upon dr ...

In Three.js, FBX bones exhibit smooth rotation, but GLTF bones display strange rotation behavior

Currently, I have successfully implemented a dynamic model that works with an FBX file using the Three.js FBXLoader. However, for convenience sake, I decided to switch to using a GLTF/GLB file as it contains textures within the same file. To achieve this, ...

Utilizing d3.js to filter a dataset based on dropdown selection

I am working with a data set that contains country names as key attributes. When I select a country from a dropdown menu, I want to subset the dataset to display only values related to the selected country. However, my current code is only outputting [obje ...

"Commander.js does not process query strings when used in conjunction with node

I developed a CLI tool using commander.js which has been released on npm. This command-line interface utilizes node-fetch to fetch data from an external API. However, I have received reports from some users stating that the query string in the fetch URL is ...

Retrieve the ID of the image element using Jquery from a collection of images within a div container

I'm encountering a simple issue that I can't seem to solve. I am working on a basic slider/gallery with the following functionalities: 1) "If button 1 is clicked, image one will appear." 2) "Clicking on button 2 will make IMAGE 1 slide left and I ...

Here's a new version: "Strategies for deactivating a text field in a desktop application that

I am currently using WiniumDriver to automate a desktop application. My goal is to disable a text field once a value has been entered into it. // Launch the desktop application WiniumDriver driver = null; DesktopOptions option = new DesktopOptions(); o ...

The synchronization of sessions between Socket.IO and Express is proving to be a challenge as

I am currently facing an issue with connecting the sessions of my express API and socket.IO server. It appears that both are storing their sessions independently. The socket.IO server has the connections session, while the express server has the user qid s ...

Storing the information received from an API as an HTML element

My HTML file contains JavaScript, along with a URL that displays data retrieved from an AWS lambda API call via AWS API Gateway. The page initially appears blank and the data is structured like this: [ {"user": "bob", "groups": ["bobsGroup"], "policies": ...

Exploring the concept of 'mapping' in jQuery: A guide to traversing an array with varying variable values

I need assistance in linking two unrelated data points together. I have an array that stores images at specific positions, and a variable that can hold different values (1, 2, or 3). My goal is to connect the array position (1, 2, or 3) with the variable v ...