Navigate back to the previous route within the Vue router hierarchy

In my Vue application, I have a Settings page with child routes such as settings/user, settings/addUser, etc. I am looking to implement a back button that when pressed, takes the user back to the specific page they visited within the Settings section. Using this.$router.go(-1) seems to only take me back one page, which is not always the desired behavior.

Currently, I have the following setup:

<v-btn class="my-2" small fab rounded color="primary" block :to="/home">
  <v-icon color="black">
    mdi-home-export-outline mdi-flip-h
  </v-icon>
</v-btn>

This code snippet is placed in settings.vue, where the <router-view> is present for rendering child routes.

javascriptvue.jsvuetify.jsvue-router

Answer №1

Have you considered utilizing Navigation Guards to achieve this? By implementing Navigation Guards, you can redirect users who are routed back to the home page based on their role (e.g., admin) to their appropriate landing page.

Referencing the example provided in the linked website:

router.beforeEach( (to, next, from) => {
  if (to.path === '/profile') {
    if (!hasAccess(to.path)) { // implement desired condition here
      next(false) // prevent access to this specific page
    } else {
      next() // proceed to the next hook
    }
  } else {
    next() // move on to the next hook
  }
})

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

What is the best way to keep a header row in place while scrolling?

I am looking to keep the "top" row of the header fixed or stuck during page scrolling, while excluding the middle and bottom rows. I have already created a separate class for the top row in my header code: view image description ...

javascripthtmlcsswordpressheader

Having trouble identifying the issue with the dependent select drop down in my Active Admin setup (Rails 3.2, Active Admin 1.0)

I am currently working on developing a Ruby on Rails application that involves three models: Games that can be categorized into a Sector (referred to as GameSector) and a subsector (known as GameSubsector) A sector consists of multiple subsectors. A Subs ...

javascriptjqueryruby-on-railsruby-on-rails-3activeadmin

Using force-directed layout to access and retrieve specific data from external or internal data sources

Just starting out with d3js and currently working on modifying the Force directed layout found at http://bl.ocks.org/mbostock/1153292 I have managed to make it so that when I hover over the node circles, the corresponding source value filenames should app ...

javascripthtmlcssjson

jade, express, as well as findings from mysql

My goal is to display the results of an SQL query in Jade, which pulls data from a table of banners. Each banner has a unique id and falls under one of three types. Here is my current code : express : connection.query("SELECT * FROM banner_idx ORDER BY ...

javascriptmysqlnode.jsexpresspug

The error "TypeError: b.toLowerCase is not a function in the bootstrap typeahead plugin" indicates that

Currently, I am working on implementing autocomplete search using the typeahead plugin version 3.1.1. My implementation involves PHP, MySQL, AJAX, and JavaScript/jQuery. While everything works perfectly with mysqli in terms of displaying suggestions when t ...

javascriptphpjquerymysqlajax

``Is there a way to access the $attrs data of child DOM elements from within a controller?

Imagine having a controller and multiple children DOMs each with their unique data attributes. <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> < ...

javascriptangularjsdomangularjs-scope

"Revamp your site with Vue and API for dynamic background

I'm faced with an issue where I am attempting to modify the background of a joke fetched from an API, but for some reason, the background is not changing and I can't seem to identify why. The main problem lies in my inability to change the proper ...

javascripthtmlvue.js

Incorporating additional value attributes without replacing the existing ones

Is there a way to add a value attribute through jQuery without removing the old attribute, similar to how addClass works? I have 7 input fields that are being typed in, and I need to combine them into one word and pass it to another input field. When I try ...

javascriptjqueryhtmlcss

Troubleshooting URL Problems with Node.js Search and Pagination

My results page has pagination set up and the routes are structured like this: app.get("/results",function(req,res){ query= select * from courses where // this part adds search parameters from req.query to the sql query// Object.keys(req.query.search).for ...

javascriptnode.jsexpresswebpagination

Best method to generate an element using any jQuery selector string

What I want to accomplish I am looking to create an element that matches any given selector string. Here's a quick example: var targetString = "a.exaggerated#selector[data-myattr='data-here']"; var targetEl = $(targetString); if(!targetE ...

javascriptjquerysizzle

Selecting elements dynamically with JQuery

Trying to use a jQuery selector within plugin code created by a 3rd party has proved difficult. When hardcoded, it works fine; however, when attempting to use variables for dynamic selection, the object cannot be found. The lack of id handles in the CSS c ...

javascriptjquery

React: Encountered an expression in JSX where an assignment or function call was expected

Trying to build a left-hand menu for my test application using react. Encountering a compilation error in the JSX of one of my classes. Is it because HTML elements cannot be placed within {} scripts in JSX? If so, how do I fix this? ./src/components/Left ...

javascriptreactjs

What effect does setting AutoPostBack to "true" in an ASP dropdownlist have on the fireEvent() function?

I am currently working on an aspx page. This page includes three dropdown lists and a button, all of which are populated dynamically based on the code written in the code-behind file (.cs file). To achieve this, I need to utilize two event handler methods ...

javascriptc#asp.net.netdom-events

Guide on invoking Objective-C function from JavaScript on iOS

I'm currently working on integrating Highchart into an iOS app. I have a requirement where I need to pass values from JavaScript (HTML file) to an Objective-C method. For example, when a user zooms in on the chart displayed in a UIWebView using Highch ...

javascriptiosobjective-cxcodehighcharts

The process of updating the value of an element in local storage with JavaScript

Most of the time we have an object stored in our localStorage. let car = { brand: "Tesla", model: "Model S" }; localStorage.setItem("car", JSON.stringify(car)); I am now eager to update the value of "model". How do I go about achieving this u ...

javascriptjsonlocal-storage

Comparing obj.hasOwnProperty(key) with directly accessing obj[key]

Consider the scenario where I need to determine if a property exists within an Object. A comparison between two methods caught my attention: if(object.hasOwnProperty(key)) { /* perform this action */ } OR if(object[key]) { /* perform this action */ ...

javascriptjson

When does JSON overload become a problem?

Creating a bookmarking site similar to delicious has been my latest project. To ensure an optimized user experience, I have decided to fetch all the bookmarks from the database table and organize them into a JSON object containing essential data such as id ...

javascriptjson

Bring back object categories when pressing the previous button on Firefox

When working with a form, I start off with an input element that has the "unfilled" class. As the user fills out the form, I use dynamic code to remove this class. After the form is submitted, there is a redirect to another page. If I click the "back" ...

javascriptjquerycss

The middleware function encountered an undefined value in req.body

I've been attempting to validate my data retrieved from my express endpoint using yup. Despite watching numerous tutorials, I am encountering a particular error that has me stuck. Every time I try to validate the data in my middleware, it consistentl ...

javascriptnode.jsexpressyup

The dynamic drop-down menu is giving incorrect values when the onchange function is called

Trying to implement Google Analytics tracking on my dynamic dropdown menu in WordPress has been a bit tricky. I want to be able to track when users click on any of the options and display the name of the selected value, not just the ID. However, I've ...

javascriptphpjquerywordpressgoogle-analytics