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

Question

我对Vue.js非常陌生，也不是任何手段的JS专家。这么裸露我。

我正在使用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查询。然后根据不断变化的网址查询提供数据]

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

我知道这可能是一个非常简单的问题，但是我正在尝试自己学习Vue，非常感谢您的帮助！无法解决。

Answer 1

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