Vue路由器中如何传递props

Question

大家好，我一直在尝试在 vue 路由中传递道具，到目前为止，我能够在下面实现这一点，但这不是我想要的。

目前可行

route.js

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

home.vue

<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,
}

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

Answer 1

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

例如，如果路径设置是这样的

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

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

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

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

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

更新：

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

1. 在应用程序的状态中设置isRegisteringMe，或者如果你正在使用它最好在vuex中。然后在注册组件中，获取状态并相应地使用它。

希望这能让你朝着正确的方向前进。