<router-link> 和 JSON 问题使用 Vue.js 和 Vue Router

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")
},