如何让路由参数与vue-router和vuex一起使用

时间:2016-11-19 22:17:52

标签: vue.js vuejs2 vue-router vuex

我试图将数据从一个组件传递到$ route.params.post但是在它的某个地方它失败了,我不确定如何让它工作。

在我的组件中,我使用router-link转到路径文件中的特定路径,但它没有路由到指定的组件。

// Component.vue

<router-link :to="{ path: 'replies', params: { post: postId }}">
    <div class="button is-light is-small has-replies" @click=" postId = thread.no ">Replies</div> 
    //clicking replies will push the thread number to data and load it into the params
</router-link>

export default {
    data () {
        return {
            postId: null
        }
    }
}

// ./routes/index.js

import Replies from '../components/Replies'

routes: [
    { path: '/', component: Frontpage },
    { path: '/replies/:post', component: Replies }
]

单击该按钮应打开回复组件,其路径类似于/replies/#,但它只是加载空白页面并完全忽略该组件。我在vuex-router-sync上导入main.js,但我无法判断这是否是问题,但我很清楚,因为我和#39;我不完全确定我正确使用vuex-router-sync

1 个答案:

答案 0 :(得分:2)

您可以像下面这样尝试,因为postId不是网址参数,而是网址本身的一部分:

<router-link :to="'replies/'+ postId'">
    <div class="button is-light is-small has-replies" @click=" postId = thread.no ">Replies</div> 
    //clicking replies will push the thread number to data and load it into the params
</router-link>