javascript - 具有可变参数的 Vuejs 动态路由

Question

我从 vueJs 和 Webpack 开始，我想使用 vue router 为我的表元素创建路由。

首先我有我的表的代码:

    <table class="table table-condensed">
                <tr style="text-align:left;" v-for="data in metadata">
                    <td>{{data.id}}</td>
                    <td><router-link :to="{ name: 'mixtapesDetails'}">
                        {{data.title}}
                    </router-link></td>
                    <td><router-link :to="{ name: 'mixtapesDetails'}">
                        {{data.artist}}
                    </router-link></td>
                </tr>

        </table>

然后我有我的 Js 函数来获取我的所有数据:

export default {
  data(){
    return {
        metadata: null
    }
  },
  methods:{
    httpGet(theUrl){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", theUrl, false); // true for asynchronous request
    xmlHttp.send(null);
    console.log(JSON.parse(xmlHttp.responseText));
    return JSON.parse(xmlHttp.responseText);
    }
  },
  mounted(){
    this.metadata = this.httpGet("urltooJsondata");
  }
}

然后我在 JS 中有我的路线:

export default new VueRouter({
routes: [
  {
    path: '/mixtapeList',
    name: 'mixtapeList',
    component: mixtapeList
  },
{
    path: '/mixtapesDetails/:id',
    name: 'mixtapesDetails',
    component: mixtapesDetails
}
]

})

目标是，当我单击路由器链接时，它会转到一个带有类似/mixtapesdetails/id 的 url 的页面。但困难的部分是我想要 id = {{this.data.id}}。对不起我的英语，我真的需要帮助，但我在网上找不到解决方案。

Answer 1

使用params对象来指定:

<router-link :to="{ name: 'mixtapesDetails', params: { id: data.id } }">
     {{data.title}}
</router-link>

当 id 为 1234 时，应根据您的路由器配置将您发送至 /mixtapeDetails/1234。

参见https://router.vuejs.org/en/api/router-link.html