javascript - 如何在Vue路由器中传递 Prop

嗨，大家好，我一直在尝试通过Vue路线传递道具，到目前为止，我能够做到这一点，但这并不是我想要的。

到目前为止，这有效

route.js

{
    path: '/register/',
    name: 'register',
    component: require('./views/Login').default,
}

家

<router-link tag="li" :to="{ name: 'register', params: { isRegisteringMe: 'true' }}" class="btn btn-green m-top-20 menu-btn" v-show="!isLoggedIn">Register</router-link>

在register.vue中，我可以console.log(this.$route.params.isRegisteringMe);单击“注册”链接时返回true。

很好，但发生的情况是用户想直接在URL中键入website.com/register。此方法将不起作用。所以我尝试了几种方法，但是当我在下面写这篇文章的时候仍然没有解决。

{
    path: '/register/:id',
    name: 'register',
    props: { isRegisteringMe: 'hi props'},
    component: require('./views/Login').default,
}

要么

{
    path: '/register',
    name: 'register',
    props: { isRegisteringMe: 'hi'},
    params: { isRegisteringMe: 'hi'},
    component: require('./views/Login').default,
}

相信我，我尝试了许多不同的组合，但我仍然坚持。

最佳答案

我认为您对在vue-router中使用参数有些误解。参数应该是路径的一部分。

例如，如果路径设置是

{
    path: '/register/:id',
    // ...
}

<router-link :to="{ name: 'register', params: { id: 'abc123', isRegisteringMe:'true' }}">Register</router-link>将用户链接到register/abc123。

由于路径设置为path: '/register/:id',，因此未定义isRegisteringMe参数，因此不会在URL中显示。

参数应该是路径的一部分。我看到了一些可以更改此方法的方法。


对isRegisteringMe使用url查询。例如，/register?isRegisteringMe=true（<router-link :to="{ name: 'register', query: { isRegisteringMe: 'true' }}"）。并从$route.query.isRegisteringMe获取值


更新：

如果您希望用户默认始终具有isRegisteringMe:true
在寄存器组件的mounted生命周期事件中进行重定向。


在应用程序的状态下设置isRegisteringMe；如果正在使用，则最好在vuex中设置。然后在寄存器组件中，获取状态并相应地使用它。


希望这能使您朝正确的方向前进。

关于javascript - 如何在Vue路由器中传递 Prop ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48940759/