当我想从外部链接vue路由器访问组件时出现问题

Question

我需要通过电子邮件恢复用户的密码，问题是当我通过电子邮件传递链接时http://my-domain/recovery-password/token，它总是将我重定向到我的登录组件(http://my-domain/login)，我需要的是直接转到我的恢复密码组件。我对vue有点陌生，我不知道我需要更改什么，这是我在路由器中的代码：

const routes = [
{
path: '/',
name: 'home',
component: Home,
meta: {
user_type: 1
}
},
{
path: '/check-balance',
name: 'check-balance',
component: CheckBalanceComponent,
meta: {
user_type: 1
}
},
{
path: '/check-payment',
name: 'check-payment',
component: CheckPaymentsComponent,
meta: {
user_type: 1
}
},
{
path: '/payment-disabled',
name: 'payment-disabled',
component: DisabledMakePaymentComponent,
meta: {
user_type: 1
}
},
{
path: '/handle-payment',
name: 'handle-payment',
component: HandlePaymentsComponent,
meta: {
user_type: 1
}
},
{
path: '/handle-report',
name: 'handle-report',
component: HandleReportsComponent,
meta: {
user_type: 1
}
},
{
path: '/user-profile',
name: 'user-profile',
component: UserProfileComponent,
meta: {
user_type: 1
}
},
{
path: '/login',
name: 'login',
component: LoginComponent,
meta: {
free: 1
}
},
{
path: '/recover-link', 
name: 'recover-link',
component: RecoverLinkComponent,
meta: {
free: 1
}
},
{
path: '/recover-password', 
name: 'recover-password',
component: RecoverPasswordComponent,    
meta: {
free: 1
}
},
{
path: '/help',
name: 'help',
component: HelpComponent,
meta: {
user_type: 1
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
if(to.matched.some(record => record.meta.free)){
next()
} else if(store.state.user && store.state.user.user_type == 1){
next()
// } else if(to.matched.some(record => record.meta.fuera)){
//   next({
//     name: 'recover-password'
//   })  
} else {
next({
name: 'login'
})
}
})
export default router

我很感激你的帮助，因为我已经站了很长时间没有找到解决方案

Answer 1

我认为Vue查看了所有的路由，以找到哪个路由将free道具作为其元对象的一部分。

它总是在到达recover-password路由之前先找到Login路由——它在Routes Array中从上到下读取。

因此，尝试将recover-password路由放在登录路由之前，如下所示：

{
path: '/recover-password', 
name: 'recover-password',
component: RecoverPasswordComponent,    
meta: {
free: 1
}
},
{
path: '/login',
name: 'login',
component: LoginComponent,
meta: {
free: 1
}
}

然而，您可能会在需要登录组件的地方开始遇到恢复组件渲染。

因此，解决整个问题的最佳方法是为两个路由指定不同的free值，然后在beforeEach挂钩中检查该值。

Answer 2

@nishkaush

这是我的vue路由器代码，你建议我修改：

Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home,
meta: {
user_type: 1
}
},
{
path: '/check-balance',
name: 'check-balance',
component: CheckBalanceComponent,
meta: {
user_type: 1
}
},
{
path: '/check-payment',
name: 'check-payment',
component: CheckPaymentsComponent,
meta: {
user_type: 1
}
},
{
path: '/payment-disabled',
name: 'payment-disabled',
component: DisabledMakePaymentComponent,
meta: {
user_type: 1
}
},
{
path: '/handle-payment',
name: 'handle-payment',
component: HandlePaymentsComponent,
meta: {
user_type: 1
}
},
{
path: '/handle-report',
name: 'handle-report',
component: HandleReportsComponent,
meta: {
user_type: 1
}
},
{
path: '/user-profile',
name: 'user-profile',
component: UserProfileComponent,
meta: {
user_type: 1
}
}, 
{
path: '/recover-password', 
name: 'recover-password',
component: RecoverPasswordComponent,    
meta: {
other: 1
}
},
{
path: '/recover-link', 
name: 'recover-link',
component: RecoverLinkComponent,
meta: {
free: 1
}
},
{
path: '/login',
name: 'login',
component: LoginComponent,
params: {
recovery_email: 'email'
},
meta: {
free: 1
}
},

{
path: '/help',
name: 'help',
component: HelpComponent,
meta: {
user_type: 1
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
if(to.matched.some(record => record.meta.free)){
next()
}  
else if(store.state.user && store.state.user.user_type == 1){
next()
}

/*This is where I have to call my recover-password component, 
from an external link without redirecting to the login*/
else if(to.matched.some(record => record.meta.other)){
next()
}
else {
next({
name: 'login'
})
}
})
export default router