如何将 JSON 响应映射到 Vue 路由？答案

【问题标题】：How to map JSON response to Vue routes?如何将 JSON 响应映射到 Vue 路由？
【发布时间】：2020-12-07 23:03:26
【问题描述】：

我有一个 API 响应这样的 JSON：

{
    "Thriller": "Thriller books",
    "Biographical": "Biographical books",
    "Romance": "Romance books"
}

我想最终得到这样的路线：

http://example.com/thriller
http://example.com/biographical
http://example.com/romance

本质上，API 应该规定可以查看哪些类型的书籍。之后Books 组件将显示有关特定书籍类型的通用数据。我的路由器配置到此为止：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Books from './views/Books.vue';

Vue.use(Router);

var books: Record<string, string> = await fetch('http://example.com/api/available-books')
    .then((response) => response.json())
    .then((data) => {
        return data;
    });


export default new Router({ 
    mode: 'history',
    base: process.env.BASE_URL,
    routes: books.map((shortname: string, fullname: string) => ({ component: Books, path: `/${shortname}`)),
});

但是 TS linter 说map() 有两个问题：行尾的TS1005: comma expected 和TS2349: Cannot invoke an expression - type String has no invocation signature（大致翻译）。

我不明白我应该做什么。也许有更好的方法来做我正在尝试的事情？我是 SPA 方面的新手。

【问题讨论】：

错误信息到底是什么？当您记录它时，来自 response.json() 的数据是否以数组的形式出现？
@altruios 有两个错误：TS1005: comma expected在行尾和TS2349: Cannot invoke an expression - type String has no invocation signature（粗略翻译）

标签： typescript vue.js vue-router

【解决方案1】：

啊...查看上面的 json 格式...地图无法正常工作的原因是因为它是一个巨大的对象。而 map 仅适用于数组。

两种解决方案...将json格式化为数组...比如

{
    "Thriller": "Thriller books",
    "Biographical": "Biographical books",
    "Romance": "Romance books"
}
const mappedToArray  = [];
for (const prop in json) {
    mappedToArray.push({[prop]:json[prop]});
}
console.log(mappedToArray) 
// output is:> Array [
//Object { Thriller: "Thriller books" },
// Object { Biographical: "Biographical books" },
// Object { Romance: "Romance books" }
//]

或代替地图。使用：Object.keys 从对象中获取一个数组，然后您可以使用 map 对其进行迭代。

Object.keys(json).map(function(key, index) {
//your code here
});

【讨论】：

我尝试了第一个解决方案，但它仍然说最后需要一个逗号。
如果你输出 json - 那就是上面的格式？如果你使用 Object.keys(json).map(function(key, index) { console.log(key+" "+index); });输出是什么？
当我复制/粘贴 json 结构时，我在 codepen.io 中出现了意外的标记......当我将它分配给一个消失的变量时。导致错误：``` { "Thriller": "Thriller books", "Biographical": "Biographical books", "Romance": "Romance books" } ``` 不会导致错误 ``` const books = { "Thriller “：“惊悚书”，“传记”：“传记”，“浪漫”：“浪漫书籍”}```

【解决方案2】：

如果您想使用正在走的路线，这可能是一种更简洁的生成路线的方式。

const books = {
    "Thriller": "Thriller books",
    "Biographical": "Biographical books",
    "Romance": "Romance books"
}

const output = Object.entries(books).map(book => {
  const [shortname, fullname] = book
  return { component: 'Books', path: `/${shortname.toLowerCase()}` } 
})

console.log(output)

否则，我建议使用 dynamic route matching 将图书 ID 传递给组件，而不是在页面加载时进行阻塞 API 调用。

const router = new VueRouter({
  routes: [
    { path: '/book/:shortname', component: Book }
  ]
})

【讨论】：