Vue CLI 3을 사용하여 디자인 포트폴리오를 만들고 있습니다. 내 웹 사이트의 아키텍처는 매우 간단합니다. 홈 페이지, 정보 페이지, 작업 페이지 및 여러 개별 프로젝트 페이지가 있습니다.
작업 페이지는 개별 프로젝트 페이지로 연결되는 여러 링크로 구성됩니다. 작업 구성 요소는 다음과 같이 설정됩니다.
<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에 전달 된 이름을 기반으로 배열에서 올바른 개체를 표시하고 싶습니다. 반복하고 페이지에 모든 배열을 표시하고 싶지 않습니다. 하나의 프로젝트 만 표시하고 싶습니다.
projectDetails.vue
<template>
<div>
<div>
<h1>{{ projectDetails.title }}</h1>
<p>{{ projectDetails.description }}</p>
</div>
</div>
</template>
<script>
import json from '@/json/projectDetails.json';
export default {
name: 'projectDetails',
props: {
name: String,
},
data() {
return {
projectDetails: Object.values(json).find(project => project.title === this.name),
};
},
};
</script>
프로젝트 데이터를 두 개의 별도 JSON 파일에 보관한다는 생각이 들지 않습니다. 컴파일하는 동안 두 파일 모두 결과 JavaScript 파일에 저장됩니다. 이 데이터를 하나의 파일에 보관하는 것이 더 낫지 않습니까? 한 곳에서 모든 데이터를 사용할 필요는 없습니다. 두 번째로, 프로젝트 목록이있는 경우 선택적 세그먼트로 라우팅을 수행 할 수 있으며 세그먼트에 값이 있는지 여부에 따라 특정 프로젝트의 목록 또는 데이터를 표시 할 수 있습니다. 그런 다음 프로젝트 데이터를 한 곳에서만로드하고 하나의 프로젝트를 선택하면 해당 데이터를이 프로젝트의 데이터 렌더링 구성 요소로 전달합니다. 이 JSON 파일을로드해야하는 다른 곳은 없습니다.
route.js
import home from '@/components/home.vue';
import about from '@/components/about.vue';
import work from '@/components/work.vue';
const routes = [
{path: '/', name: 'home', component: home},
{path: '/about', name: 'about', component: about},
{path: '/work/:name?', name: 'work', component: work, props: true},
];
export default routes;
work.vue
<template>
<div>
<project-details v-if="currentProject" :project="currentProject"/>
<projectLink v-else
v-for="project in projects"
v-bind="project"
v-bind:key="project.projectName"
/>
</div>
</template>
<script>
import projectLink from './projectLink';
import projectDetails from './projectDetails';
import json from '@/json/projectLink.json';
export default {
name: 'work',
props: {
name: String,
},
data() {
return {
projects: Object.values(json),
};
},
computed: {
currentProject() {
if (this.name) {
return this.projects.find(
project => project.projectName === this.name,
);
}
},
},
components: {
projectLink,
projectDetails,
},
};
</script>
projectDetails.vue
<template>
<div>
<div>
<h1>{{ project.title }}</h1>
<p>{{ project.description }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'projectDetails',
props: {
project: Object,
},
};
</script>
projectLink.vue (한 줄만 변경됨)
<router-link v-if="projectName" :to="{ name: 'work', params: { name: projectName }}">
Vue.component("navigation", {
template: "#navigation"
});
const Projects = {
template: "#projects",
props: ["projects"]
};
const Project = {
template: "#project",
props: ["project"]
};
const HomePage = {
template: "#home"
};
const AboutPage = {
template: "#about"
};
const WorkPage = {
data() {
return {
projects: [{
slug: "foo",
name: "Foo",
desc: "Fus Ro Dah"
},
{
slug: "bar",
name: "Bar",
desc: "Lorem Ipsum"
}
]
};
},
props: {
slug: String
},
template: "#work",
components: {
Projects,
Project
},
computed: {
currentProject() {
if (this.slug) {
return this.projects.find(project => project.slug === this.slug);
}
}
}
};
const router = new VueRouter({
routes: [{
path: "/",
name: "home",
component: HomePage
},
{
path: "/about",
name: "about",
component: AboutPage
},
{
path: "/work/:slug?",
name: "work",
component: WorkPage,
props: true
}
]
});
new Vue({
router,
template: "#base"
}).$mount("#app");ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.nav>li {
float: left;
}
ul.nav>li>a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.nav>li>a:hover {
background-color: #111;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>
<div id="app"></div>
<script type="text/x-template" id="base">
<div id="app">
<div>
<navigation></navigation>
<router-view></router-view>
</div>
</div>
</script>
<script type="text/x-template" id="navigation">
<ul class="nav" id="navigation">
<li>
<router-link :to="{name: 'home'}">Home</router-link>
</li>
<li>
<router-link :to="{name: 'about'}">About</router-link>
</li>
<li>
<router-link :to="{name: 'work'}">Work</router-link>
</li>
</ul>
</script>
<script type="text/x-template" id="home">
<div id="home">This is Home Page</div>
</script>
<script type="text/x-template" id="about">
<div id="about">This is About Page</div>
</script>
<script type="text/x-template" id="work">
<div id="work">
<project v-if="currentProject" :project="currentProject"></project>
<projects v-else :projects="projects"></projects>
</div>
</script>
<script type="text/x-template" id="projects">
<div id="projects">
<ul>
<li v-for="project in projects" :key="project.slug">
<router-link :to="{name: 'work', params:{ slug: project.slug}}">{{project.name}}</router-link>
</li>
</ul>
</div>
</script>
<script type="text/x-template" id="project">
<div id="project">
<h2>{{project.name}}</h2>
<p>{{project.desc}}</p>
</div>
</script>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다