javascript - 根据 vueJS 中的 url id 过滤表数据

Question

我想根据 url 页面中的 id 从 JSON API 获取数据。首先，我的表的代码具有取决于转到第二个表模板的 url id 的链接:

<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', params{id : data.id}}">
            {{data.title}}
        </router-link></td>
        <td><router-link :to="{ name: 'mixtapesDetails', params{id : data.id}}">
            {{data.artist}}
        </router-link></td>
    </tr>
</table>

在第二个表中，我只想根据 ID 显示数据:

    <div style="margin-left:400px;">
        <div>{{$route.params.id}}</div>
        <table class="table table-condensed">
            <tr>
                <th>ID</th>
            </tr>
            <tr style="text-align:left;" v-for="data in metadata">
                <td>{{data.id}}</td>
                <td>{{data.title}}</td>
                <td>{{data.artist}}</td> 
                <td>{{data.cover}}</td>

            </tr>
        </table>
    </div>

然后我有我的 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 的单个页面，并且我希望该页面上显示的数据是与该 url 对应的数据id。

我确实需要帮助，但我在网上找不到解决方案。

Answer 1

我认为为此目的存在 $route.params 对象。所以如果你有这样的路线，

{
  path: '/mixtapesDetails/:anything',
  name: 'mixtapesDetails',
  component: mixtapesDetails
}

在 mixtapesDetails 组件实现中，您可以使用 $route.params.anything 访问 :anything 路径段值。