vue.js - VueJS 通过路由器传递参数 next()
问题描述
当我在 /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,
}
})