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

【问题标题】：How to get route params to work with vue-router and vuex如何让路由参数与 vue-router 和 vuex 一起使用
【发布时间】：2016-11-19 22:17:52
【问题描述】：

我正在尝试将数据从组件传递到 $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 组件，其路由看起来像 /replies/#，但它只是加载一个空白页面并完全忽略该组件。我在我的main.js 上导入vuex-router-sync，但我不知道这是否是问题所在，但我很清楚这可能是因为我不完全确定我是否正确使用了vuex-router-sync。

【问题讨论】：

为什么不直接将thread.no设置为router-link呢？为什么首先将其设置为数据这种奇怪的绕道？
在应用 saurabh 的解决方案并正确设置链接后，我通过 router-link 直接链接到 thread.no。当它不起作用时，我想我只是在尝试不同的方法让它起作用，而没有意识到这是一个简单的解决方案。

标签： vue.js vuejs2 vue-router vuex

【解决方案1】：

您可以像下面这样尝试，因为postId 不是 URL 参数，而是 URL 本身的一部分：

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

【讨论】：