Nuxt-如何找到前一条路线?

时间:2019-03-18 11:16:32

标签: vue.js vuejs2 nuxt.js

我可以使用this.$router.go(-1)将用户重定向到上一条路由。但是,我无法理解在重定向之前如何获得有关先前路由的信息。

基本上,通过首先阅读先前的路由是什么,我想确保先前的路由来自同一域,然后重定向到该域,否则执行其他操作。

5 个答案:

答案 0 :(得分:4)

在您可以访问nuxt上下文ex: asyncData or middlewares的nuxt静态方法中:

asyncData({from}){
    // do something with from
}

但是如果你想在 vue 实例中获得 prev 路由,你可以使用

this.$nuxt.context.from

另外,请记住,如果浏览器历史记录中没有任何上一页,则 from 可以是未定义的

答案 1 :(得分:1)

没有开箱即用的方式来获取此信息。

您可以做的是将beforeRouteEnter作为全局警卫,并在导航到新路线之前保存路线。

然后,您可以检查是否保存了以前的路线并执行this.$router.go(-1)

如果您以history模式使用路由器,则可能会想使用vue-router用来获取此信息的History API。但是HistoryApi不允许这样做,因为这将是一个巨大的隐私问题。您可以在当前标签中看到用户的全部历史记录。

答案 2 :(得分:1)

您可以在页面中添加asyncData钩子,该钩子可以使用context属性访问from对象:

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

答案 3 :(得分:0)

在[middleware]目录中,您可以将此脚本放置在[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)
  }
}

在[nuxt.config.js]中:

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

无论何时在客户端中更改当前页面,您都应该看到显示前一页的日志。也许可以帮到您。

答案 4 :(得分:0)

您可以通过在组件/页面上实现Vue导航防护来实现此目的。

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

或者有这个人https://gist.github.com/zolotyx/b4e7fda234b3572fb7adaf11391f8eef#file-auth-js,他编写了一个脚本来帮助重定向