和使用Vue.js和Vue路由器的JSON问题

Question

我正在使用Vue CLI 3创建设计作品集。我正在使用<router-view>和<router-link>导航到我的不同组件。我的网站的架构非常简单。我有一个主页，关于页面，工作页面和几个单独的项目页面：

• 首页
  • 关于
  • 工作
    • 项目
    • 项目
    • 项目

工作页面由几个链接组成，这些链接将单击进入各个项目页面。工作组件的设置如下：

<template>
  <div>
    <projectLink v-for="data in projectLinkJson" />
  </div>
</template>

<script>
import projectLink from '@/components/projectLink.vue'
import json from '@/json/projectLink.json'

export default {
  name: 'work',
  data(){
    return{
      projectLinkJson: json
    }
  },
  components: {
    projectLink
  }
}
</script>

如您所见，我正在导入JSON以动态呈现内容。 projectLink组件如下所示：

<template>
  <router-link to='/project'>
    <div class="projectLink" v-bind:class="type">
      <h1>{{ title }}</h1>
    </div>
  </router-link>
</template>

<script>
export default {
  name: 'projectLink',
  props: {
    title: String,
    type: String
  }
}
</script>

在上面的组件中，您可以看到我将<router-link>设置为'/ project'。在我的routes.js文件中，我只是告诉此路由转到我的项目页面组件。我想将项目页面组件用作每个单独项目页面的框架。但是如何动态地执行此操作？如何为每个项目路由到相同的组件，但如何更改每个项目页面的内容？我可以像在工作组件中一样使用JSON进行此操作。

我的猜测是，我可以更改<router-link>以为其提供URL查询。然后根据不断变化的URL查询提供数据]

<router-link :to="{ path: 'project', query: { url }}">

Answer 1

我将像这样创建一个路由器链接：

<router-link :to="{ name: 'projectDetails', params: { name: projectName }}">

我将在params对象中为项目传递某种类型的标识符。在此示例中，我使用名称，但是ID可能更适合您的情况。我建议您使用“命名”路由，这样以后您就可以更轻松地更改url。

然后我将创建一个ProjectDetails.vue页面。

我会像这样在您的路由器文件中输入一个条目：

{
    path: "/project/:name",
    name: "projectDetails",
    props: true,
    component: () =>
      import(/* webpackChunkName: "ProjectDetails"*/ "../views/ProjectDetails")
},