VueJS 通过路由器传递参数 next()

Question

我想在 /login 时将最后一条路由传递到我的路由器，以便在登录到所需路由时重定向用户。

所以用户转到 /payment 我重定向到 /login 并且当身份验证正常时我想将用户重定向到 payement

这是我的 router.js :

import ...

Vue.use(Router)

let router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/payment',
      name: 'payment',
      component: Payment,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/my-account',
      name: 'my-account',
      component: MyAccount,
      meta: {
        requiresAuth: true
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  console.log('Before Each Routes')
  if(to.matched.some(record => record.meta.requiresAuth)) {
    if (store.getters.isLoggedIn) {
      console.log('Logged in')
      next()
      return
    }
    console.log(to.fullPath)
    next({
      path: '/login',
      params: { nextUrl: to.fullPath }
    })
    return
  } else {
    console.log(to.fullPath)
    next()
  }
})

export default router

所以我设置了一些 console.log 然后我得到了这个 :

如果我直接进入 /login，输出：

Before Each Routes
/login

然后如果我去/payment，输出：

Before Each Routes
/payment
Before Each Routes
/login

所以现在当我进入我的登录组件并使用 this.$route.params.nextUrl 它是未定义的。 next() 参数不存在，我不知道为什么。

我做错了什么？

Answer 1

您似乎混淆了两种不同的机制：参数和查询。参数必须是 url 的组成部分，例如 /user/:id，而查询参数是自动附加的。

你想要这个：

next({
    path: '/login',
    query: {
       nextUrl: to.fullPath,
    }
})

相关阅读：https://router.vuejs.org/api/#route-object-properties

Answer 2

Tristan 上面的方法在传递 url 作为参数时是最好的。但是，在正常情况下，我们会传递类似 id 的内容，因此您可以使用它：

next({ name: 'account', params: { id: 3 } });

添加替换选项以防止导航出现在历史记录中：

next({ name: 'account', params: { id: 3 }, replace: true });

我正在使用 vue-router 3.1.6.

VueJS 通过路由器传递参数 next()

VueJS pass parameters through the router next()

parameters

vue.js

vue-router

vuejs2