vue-router中如何传递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); 当我点击注册 link.

时 return 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 中参数的用法有一些误解。参数应该是路径的一部分。

例如，如果路径设置像

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

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

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

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

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

更新：

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

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

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

vue-router中如何传递props

How to pass props in vue router

javascript

vue.js

vue-router

vue-component

vuejs2