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。

这很好，但是用户想要直接在网址中输入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参数，并且不会在网址中显示。

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

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

更新

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

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

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

如何在vue路由器中传递道具

1 个答案: