Javascript 在Vue3中使用动态路径加载本地json

我正在尝试做一个简单的单页网站，它的文本存储在本地json文件中。让我们假设它是一个网站，列出著名的卡通猫和狗在单独的视图（页）。猫和狗的视图模板（views/testcard.vue）是相同的，但是猫和狗的文本存储在单独的json文件（assets/json/cats.json&assets/json/dogs.json）中

我知道如何将json导入视图，但这是一条静态路径。但问题是：如何使用基于props/params的路径将json导入到视图中，以便在猫的情况下是cats.json，在狗的情况下是dogs.json

URL的形式是domain.com/cat/garfield，我已经成功地通过路由器（router/index.js）提供了物种（猫/狗）和个体动物（加菲猫、布鲁托…）在视图文件中可用，如下所示

{
        path: "/cats/:currentAnimal",
        name: "Cats",
        component: () => import("../views/Testcard.vue"),
        props: {
            currentType: "cat",
            jsonLocation: "@/assets/json/cats.json",
        },
    },
    {
        path: "/dogs/:currentAnimal",
        name: "Dogs",
        component: () => import("../views/Testcard.vue"),
        props: {
            currentType: "dog",
            jsonLocation: "@/assets/json/dogs.json",
        },
    },

视图/Testcard.vue如下所示：

<template>
    <div class="card">
        <h1>{{ currentAnimal }} is a famous {{ currentType }}</h1>
    </div>
</template>

<script>
import { computed } from "vue";
import { useRoute } from "vue-router";
//the line below would work, but it is static path
//import json from '@/assets/json/cats.json';
export default {
    name: "Testcard",
    props: ["currentType", "jsonLocation"],
    setup() {
        const route = useRoute();
        const currentAnimal = computed(() => route.params.currentAnimal);
        return {
            currentAnimal,
        };
    },
};
</script>

{{currentAnimal}}是著名的{{currentType}
从“vue”导入{computed}；
从“vue路由器”导入{useRoute}；
//下面的行可以工作，但它是静态路径
//从“@/assets/json/cats.json”导入json；
导出默认值{
名称：“测试卡”，
道具：[“currentType”，“jsonLocation”]，
设置（）{
const route=useRoute（）；
const currentAnimal=computed（（）=>route.params.currentAnimal）；
返回{
动物，
};
},
};

---

我正在使用Vue3，但这可能与Vue2没有什么不同。该网站不会调用任何外部来源，因此我希望尽可能简单。

不要将

@

别名存储在json中，否则Webpack将无法找到该文件。您可以删除整个路径：

jsonLocation:“cats.json”

jsonLocation:“dogs.json”

动态使用

import

时，它会返回一个承诺，该承诺解析为

default

属性中带有json的模块：

设置（道具）{
导入（`@/assets/json/${props.jsonLocation}`）。然后（模块=>{
console.log（module.default）；
});
},