Nuxt - How to find the previous route?

vue-router get previous route
nuxt watch route change
nuxt nested routes
nuxt router
nuxt redirect page
nuxt lifecycle
nuxt router base
nuxt scrollbehavior

I am able to use this.$router.go(-1) to redirect a user to the previous route. However, I am not able to understand how I get get the information about the previous route before redirecting.

Basically, by first reading what the previous route was, I want to make sure that the previous route was from the same domain and only then redirect to it, otherwise do something else.

There is no out of the box way to get this information.

What you can do is attach a beforeRouteEnter as a global guard and save the route before navigating to a new route.

Then you can check to see if there is a previous route saved and execute this.$router.go(-1)

If you are using the router in history mode you could be tempted to use the History api that vue-router is using to get this information. But HistoryApi doesn't allow for this as this would be a huge privacy problem. You could see the entire history of the user in the current tab.

Redirect to previous page � Issue #54 � nuxt/nuxtjs.org � GitHub, Hello, I was wondering, how can I redirect to the previous page with e.g. the nuxt- link? Greetings, This question is available on Nuxt.js community (#c50) If you want the previous route why don't simply do: beforeRouteEnter(to, from, next) { console.log("before route called"); const previousRoute = from.path || from.fullPath console.log(`Previous Route ${previousRoute}`) } Which log is: _slug.js:200 before route called _slug.js:202 Previous Route /

In the [middleware] directory you can put this script [routing.js]:

/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function (context) {
  // current route
  console.log('route=', context.route.name)
  // previous route
  if (process.client) {
    const from = context.from
    console.log('from=', from)
  }
}

In [nuxt.config.js]:

router: {
    ...
    middleware: 'routing'
  },

Whenever you change the current page in the client you should see a log showing the previous page. Maybe it can help you.

Routing, Nuxt.js use the file-system to generate the routes of your web applications. If you do not know the depth of your URL structure, you can use _.vue to� Set up a Nuxt.js app. You can set up a new Nuxt.js project using create-nuxt-app. Instead of a new project, in this tutorial you begin by cloning an existing repository. This repository is set up to demonstrate how to deploy a dynamic Nuxt.js app as a static site. Create a new repository under your GitHub account from a template repository.

In your page you can add asyncData hook which have access to context object with from property:

asyncData({ from }) {
    console.log(from);
  }

API: The router Property, You may want to change the separator between route names that Nuxt.js uses. You can do The schema of the route should respect the vue-router schema. Get the latest Nuxt news to your inbox, curated by the core team and contributors. There is a fairly detailed discussion in github about Nuxt having an issue with a redirect when you are hitting a protected page directly. The redirect goes to the default page redirect rather than the previously hit page.

You can achieve this by implementing the Vue Navigation guards, on the component/page.

 ...
    data() {
     return {
       ...
       prevRoute: null
     }
    },
    beforeRouteEnter(to, from, next) {
      console.log(from)
      next();
    },
    ...

Or there is this guy https://gist.github.com/zolotyx/b4e7fda234b3572fb7adaf11391f8eef#file-auth-js, he has made a script to help in redirecting

API: nuxt.renderRoute(route, context), Example: const { loadNuxt, build } = require('nuxt') async function start() { // Get nuxt instance for start (production mode) // Make sure to have run `nuxt build`� @taurose By "previously rendered path" do you mean it would give me just the previous route segment in the cascade/route tree? I would definitely want to get the whole route after the tld. It seems super useful for the router to be pushing/popping to a history array that is available in the router context.

API: The Context, function (context) { // Universal keys const { app, store, route, params, query, env, when using i18n , you can get access to $i18n through context.app.i18n . Hey, in nuxt guide there is example how to deal with dynamic routes using promise and call to axios, now, how to deal with two of them? generate: { routes: function (callback) { let posts = axios.g

Vue router back button, This package does not just sends you to the previous route. Instead it tracks your Add the reference to the plugins section of nuxt.config.js plugins: [ . When Nuxt renders each site, it will include only the needed CSS and all we have to do is merge them all in the render:route hook. We can do so by removing the line that adds the amp-custom

Resolving Before Route - VueJS - Allen Kim, In the previous article, I have covered the following items in this article Rendering using Nuxt, a VueJS core plugin; Routing using vie-router, core plugin , including You can find the working example with code from github. You can simply create a file for a page, and Nuxt.js will automatically set up the route for you to navigate and view the newly created file out of the box. We will see this later in the tutorial. Nuxt.js builds upon Vue, and you can still write and structure your applications the same way you would while building a typical Vue.js application.

Comments
  • I'm still looking for this solution too. Perhaps it is impossible, but who knows ... maybe I'm wrong :)