Vue在计算动态路由时会丢失所有css和图像

Question

我正在学习这门课程，https://vueschool.io/lessons/dynamic-routes和我创建了一个data.json文件，如下所示：

{
    "quizzes": [
      {
        "name": "Quiz 1",
        "slug": "quiz-1",
        "image": "1.jpg",
        "id": 1,
        "description":
          "First quiz"
      },
      {
        "name": "Quiz 2",
        "slug": "quiz-2",
        "image": "2.jpg",
        "id": 2,
        "description":
          "Second quiz"
            }
   ]
}

现在，我想使用这些数据创建一条动态路由。但当我创建.vue并在其中导航时，所有的样式和图像都消失了，就像public文件夹无法工作一样。这是我的代码：

    <template>
    <h1>{{quiz.name}}</h1>
    <p>{{quiz.description}}</p>
</template>

<script>
import sourceData from '@/data.json'

export default {
    commputed:{
        quizId(){
            return parseInt(this.$route.params.id)
        },
        quiz(){
            return sourceData.quizzes.find(quiz => quiz.id === this.quizId)
        }
    }
}
</script>

奇怪的是，css已加载，但它是完全空的(并且它不在其他页面中)。这是我的文档树：

​

​

这是动态路由中加载的css：

​

在index.js文件中，我有：

import { createWebHistory, createRouter } from "vue-router";
import Home from "/views/Home.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
{
    path: "/quiz/:id",
    name: "quiz.show",
    component: ()=> import("/views/QuizShow.vue")
  }

];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Answer 1

我弄明白了:问题出在path: "/quiz/:id",上，如果我在/quiz_:id中修改它，它就能正常工作。不过很奇怪。