Изучаю Vue, делаю пробный сайт. У меня на странице отображается список компонентов. По клику на любой должен осуществляться переход на страницу на которой с зависимости от того по какому из них был клик будет добавляться информация.
Получается примерно такая картина:
код страницы
<template>
<div class="container">
<div class="services">
<h1 class="services__heading">Практики</h1>
<ul class="services__items">
<PracticeComponent
v-for="item in practices.items"
:key="item.title"
:practicesData="item"
/>
</ul>
</div>
</div>
</template>
<script>
import PracticeComponent from "../components/PracticeComponent.vue"
export default {
data() {
return {
practices: {
items: [
{title: 'Строительство/Девелопмент', path: '/practices', src: require('../assets/img/services/over.svg')},
{title: 'Земельный консалтинг', path: '/practices', src: require('../assets/img/services/over.svg')},
{title: 'Сделки и инвестиции', path: '/practices', src: require('../assets/img/services/over.svg')},
{title: 'Судебные споры', path: '/practices', src: require('../assets/img/services/over.svg')},
{title: 'Due diligence/Аналитика', path: '/practices', src: require('../assets/img/services/over.svg')},
{title: 'Налоговый консалтинг', path: '/practices', src: require('../assets/img/services/over.svg')},
{title: 'Банкротство', path: '/practices', src: require('../assets/img/services/over.svg')},
]
},
}
},
components: {
PracticeComponent,
},
}
</script>
код компонента
<template>
<router-link
class="services__item"
:to="practicesData.path"
:title="title"
>
<img
:src="practicesData.src"
:alt="practicesData.title"
class="services__item_img"
>
<p class="services__item_title">{{practicesData.title}}</p>
</router-link>
</template>
<script>
export default {
data() {
return {
title: this.practicesData.title
}
},
props: {
practicesData: {
type: Object,
default: function () {
return {}
}
},
},
mounted () {
console.log(this.title);
},
}
</script>
Вторая страница шаблонная, она должна будет заполниться текстом по той тематике на которую нажмёт пользователь. конечно можно наклепать отдельные страницы для каждой темы, но я хотел бы узнать, можно ли как то динамически это сделать. Я пытался передать входной параметр, но не получилось.
Код страницы 2
<template>
<div class="container">
<div class="practices">
<h2 class="practices__heading">Какое-нибудь хвалебное вступление!</h2>
<p>Описание</p>
<ul class="practices__items">
<li class="practices__item">Разрешение споров в сфере строительства</li>
</ul>
</div>
</div>
</template>
<script>
import practicItems from "../data/practicItems.js"
export default {
data() {
return {
practicItems: practicItems
}
},
props: {
title: {
type: String,
default: ''
}
}
}
</script>
