Question

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

首先我有我的桌子代码：

    <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

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

1 个答案: