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

Posted 2023-03-13

【中文标题】如何将 JSON 响应映射到 Vue 路由？

【英文标题】：How to map JSON response to Vue routes?

【发布时间】：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（粗略翻译）

【参考方案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 
  ]
)