我要在/ 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()
参数不存在,我也不知道为什么。
我做错了什么?
答案 0 :(得分:3)
上面的Tristan方法是将url作为参数传递时的最佳方法。但是,在正常情况下,我们会传递类似id的内容,因此您可以使用以下代码:
next({ name: 'account', params: { id: 3 } });
添加替换选项以防止导航出现在历史记录中:
next({ name: 'account', params: { id: 3 }, replace: true });
我正在使用vue-router 3.1.6。
答案 1 :(得分:1)
您似乎在混淆两种不同的机制:参数和查询。参数必须是网址的组成部分,例如/user/:id
,而查询参数会自动附加。
您想要这个:
next({
path: '/login',
query: {
nextUrl: to.fullPath,
}
})