Я создаю свое дизайнерское портфолио, используя Vue CLI 3. Архитектура моего веб-сайта очень проста. У меня есть домашняя страница, страница о странице, рабочая страница и несколько отдельных страниц проекта:
- Home
- About
- Work
- Project
- Проект
- Проект
Рабочая страница состоит из нескольких ссылок, по которым можно перейти на отдельные страницы проекта. Рабочий компонент настроен следующим образом:
<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 можно увидеть в блоке кода ниже. В этом компоненте я передаю параметр в <router-link> с именем projectName
<template>
<router-link :to="{ name: 'projectDetails', params: { name: projectName }}">
<h1>{{ title }}</h1>
</router-link>
</template>
<script>
export default {
name: 'projectLink',
props: {
title: String,
projectName: String
}
}
</script>
Мой файл route.js настроен так:
const routes = [
{ path: '/', component: home },
{ path: '/about', component: about },
{ path: '/work', component: work },
{
path: "/work/:name",
name: "projectDetails",
props: true,
component: projectDetails
},
];
и мой JSON такой:
{
"0": {
"title": "test",
"projectName": "test"
}
}
Наконец, мой компонент projectDetails — это компонент, в котором у меня возникла эта проблема:
<template>
<div>
<div
v-for="(data,index) in projectDetailsJson" v-if="index <= 1">
<h1>{{ data.title }}</h1>
<p>{{ data.description }}</p>
</div>
</div>
</template>
<script>
import json from '@/json/projectDetails.json'
export default {
name: 'projectDetails',
data(){
return{
projectDetailsJson: json
}
},
props: {
description: String,
title: String
}
}
</script>
Я успешно перенаправляюсь на нужный URL-адрес /project/'name'. Я хочу использовать компонент projectDetails в качестве основы для каждой из моих отдельных страниц проекта. Но как мне сделать это динамически? Я хочу получить данные из файла JSON и отобразить правильный объект из массива на основе имени, которое было передано в URL-адрес. Я не хочу повторять и отображать весь массив на странице. Я просто хочу, чтобы один проект отображался.
