Vue单页应用跳转详情页后无法渲染对应ID数据问题求助

以下是需要修改的3处问题及对应修正代码：

• 路由配置参数命名不符合规范
  原路由中/detail/:data.id的参数命名带.会导致参数解析异常，直接将参数改为标准命名id即可：

import Vue from "vue";
import VueRouter from "vue-router";

import Galleria from "./components/Galleria.vue";
import Detail from "./components/Detail.vue";

Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "galleria",
    component: Galleria
  },
  {
    path: "/detail/:id",
    name: "Detail",
    component: Detail
  }
];

const router = new VueRouter({
  mode: "history",
  routes
});

export default router;

• Galleria组件v-for循环的key属性绑定错误
  原代码中循环列表的key绑定了当前路由参数，和循环项无关，会导致列表渲染异常，改为绑定当前循环项的id即可：

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        <router-link :to="{ path: '/detail/' + item.id }">
          {{ item.id }} - {{ item.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import data from "../assets/data.json";

export default {
  data() {
    return {
      dataList: data,
    };
  },
  name: "galleria",
};
</script>

这里顺便把变量名从data改成了dataList，避免和Vue内置的data配置项重名引发歧义。

• Detail组件缺少按路由ID筛选数据的逻辑
  原代码直接把整个json数组赋值给了变量，没有根据路由参数匹配对应条目，新增计算属性来筛选对应数据即可：

<template>
  <div>
    <h1>{{ currentItem.name }}</h1>
    <p>{{ currentItem.description }}</p>
  </div>
</template>

<script>
import data from "../assets/data.json";

export default {
  name: "Detail",
  computed: {
    currentItem() {
      // 路由参数默认是字符串格式，转为数字后和json中的id匹配
      const targetId = Number(this.$route.params.id)
      return data.find(item => item.id === targetId) || {}
    }
  }
};
</script>

修改完成后点击列表项即可正常加载对应ID的详情内容。

内容的提问来源于stack exchange，提问作者Alejandro Arias