vue.js - VueJS通过路由器的next()参数传递

标签 vue.js parameters vuejs2 vue-router

当我在/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()参数不存在,我也不知道为什么。

我做错了什么?

最佳答案

您似乎混淆了两种不同的机制:参数和查询。参数必须与url集成在一起,例如/user/:id,而查询参数会自动附加。

你要这个:

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

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

关于vue.js - VueJS通过路由器的next()参数传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54677736/

相关文章:

javascript - 如何在模态 vue 中使用窗口打印?

webpack - 带有 webpack 的 Vue-CLI 添加外部 Css 和 Js 文件

javascript - v-bind 没有检测到数组内容的变化(vue js)

javascript - 如何在Vue中仅激活一项 Accordion ?

java - 方法的参数值

tsql - 是否可以将CASE与IN一起使用?

javascript - 继续:单击似乎可以调用所有方法

vue.js - vuetify 数据表组件未正确加载

javascript - 如果通过 jquery 更新,Vuejs 绑定(bind)不起作用

javascript - 我可以将参数直接传递给 .js 文件,以及如何获取值