vue.js Router 에 포 함 된 경로 의 실 용적 인 예제
Vue.js 단일 페이지 응용(SPA)이 상당히 복잡 해 지면 서 Vue 경로 와 내장 경로 가 필요 합 니 다.플러그 인 루트 는 더 복잡 한 사용자 인터페이스 와 서로 플러그 인 된 구성 요 소 를 허용 합 니 다.Vue Router 에 포 함 된 경로 의 실용성 을 보 여 주 는 상대 적 으로 간단 한 사례 를 만 듭 니 다.
Vue CLI 로 설정
설치 되 지 않 았 다 면 다음 명령 을 실행 하여 전역 에 Vue CLI 를 설치 하 십시오.
$ npm install -g @vue/cli
혹은
$ yarn global add @vue/cli
이제 명령 행 에서 vue 명령 을 실행 할 수 있 습 니 다.alligator-nest 라 는 Vue 애플 리 케 이 션 을 만 듭 니 다:
$ vue create alligator-nest
프롬프트 아래 기본 설정 을 선택 하 십시오(Enter 키 를 누 르 십시오).다음 명령 을 실행 합 니 다:
$ npm install vue-router
그리고 선택 한 편집기 에서 alligator-nest 디 렉 터 리 를 엽 니 다.기본 코드
다음 CSS 는 UI 를 위 한 요 소 를 찾 는 데 도움 을 줄 것 입 니 다.스타일 시트 파일 로 추가 하기 public/폴 더 에서 public/index.html 에서 참조 합 니 다.이 를 위해,CSS grid 를 사용 합 니 다:
grid.css
.row1 {
grid-row-start: 1;
grid-row-end: 2;
}
.row12 {
grid-row-start: 1;
grid-row-end: 3;
}
.row123 {
grid-row-start: 1;
grid-row-end: 4;
}
.row2 {
grid-row-start: 2;
grid-row-end: 3;
}
.row23 {
grid-row-start: 2;
grid-row-end: 4;
}
.row3 {
grid-row-start: 3;
grid-row-end: 4;
}
.col1 {
grid-column-start: 1;
grid-column-end: 2;
}
.col12 {
grid-column-start: 1;
grid-column-end: 3;
}
.col123 {
grid-column-start: 1;
grid-column-end: 4;
}
.col1234 {
grid-column-start: 1;
grid-column-end: 5;
}
.col2 {
grid-column-start: 2;
grid-column-end: 3;
}
.col23 {
grid-column-start: 2;
grid-column-end: 4;
}
.col234 {
grid-column-start: 2;
grid-column-end: 5;
}
.col3 {
grid-column-start: 3;
grid-column-end: 4;
}
.col34 {
grid-column-start: 3;
grid-column-end: 5;
}
.col4 {
grid-column-start: 4;
grid-column-end: 5;
}
다음은 vue-cli 에 추 가 된 기본 파일 을 변경 합 니 다.src/components 폴 더 에서 HelloWorld.vue 를 삭제 하고 src/App.vue 에서 관련 된 모든 것 을 삭제 합 니 다.App.vue 의 HTML 태그 와 CSS 스타일 을 다음 과 같이 수정 합 니 다.
<template>
<div id="app">
<h1 class="row1 col12">Alligator Nest</h1>
<a class="row1 col3">Travels</a>
<a class="row1 col4">About</a>
<div class="row2 col234"></div>
</div>
</template>
html, body {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
padding: 2%;
height: 100%;
display: grid;
grid-template-rows: 20% 80%;
grid-template-columns: 25% 25% 25% 25%;
}
프로젝트 의 루트 디 렉 터 리 에서 npm run serve 를 실행 하면 브 라 우 저의 localhost:8080 에 마 우 스 를 걸 고 프레임 워 크 레이아웃 을 볼 수 있 습 니 다.디 스 플레이:grid 속성 이 유용 합 니 다!이제 우 리 는 길 을 만 들 수 있다.Vue 경로 입력
/coponents 폴 더 에 AboutPage.vue 라 는 구성 요 소 를 만 듭 니 다.그것 은 이렇게 보인다.
<template>
<div>
<h2>About</h2>
<p>Alligators were around during the time of the dinosaurs.</p>
</div>
</template>
<script>
export default {
name: 'AboutPage',
}
</script>
<style scoped>
</style>
현재 우리 main.js 파일 은/about 경로 가 필요 합 니 다.그것 은 이렇게 보인다.
import VueRouter from 'vue-router';
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import AboutPage from './components/AboutPage.vue';
const routes = [
{ path: '/about', component: AboutPage },
]
const router = new VueRouter({
routes
})
new Vue({
render: h => h(App),
router
}).$mount('#app');
마지막 으로 App.vue 로 돌아 가"About"의 닻 표 시 를 속성 to="/about"의현재,우 리 는 기능 이 완 비 된 사이트 프레임 워 크 를 가지 고 있 으 며,"About"페이지 를 위해 루트 를 처리 했다.
우 리 는 여기 서 루트 기능 을 중점적으로 소개 하기 때문에 스타일 에 너무 많은 시간 을 들 이지 않 을 것 이다.그럼 에 도 불구 하고 트 래 블 스 페이지 를 좀 더 정교 하 게 만들어 야 합 니 다.
우선,TravelPage 를 만 드 는 방법 은 About Page 를 만 드 는 것 과 같 습 니 다.main.js 에서 인용 합 니 다.
다음 두 개의 구성 요 소 를 만들어 야 합 니 다.이 구성 요 소 는 최종 적 으로 TravelPage.vue 에 포 함 됩 니 다.
TravelAmericaPage.vue
<template>
<div>
<p>Alligators can be found in the American states of Louisiana and Florida.</p>
</div>
</template>
<script>
export default {
name: 'TravelAmericaPage'
}
</script>
<style scoped>
</style>
TravelChinaPage.vue
<template>
<div>
<p>Alligators can be found in China's Yangtze River Valley.</p>
</div>
</template>
<script>
export default {
name: 'TravelChinaPage'
}
</script>
<style scoped>
</style>
새 겨 진 경로 설정이제 main.js 와 TravelPage.vue 를 동시에 업데이트 하여 children 을 사용 하여 이 내장 경 로 를 참조 합 니 다.main.js 를 routes 상수 에 대해 다음 과 같은 정 의 를 가 진 것 으로 업데이트 해 야 합 니 다.
const routes = [
{
path: '/travel', component: TravelPage,
children: [
{ path: '/travel/america', component: TravelAmericaPage },
{ path: '/travel/china', component: TravelChinaPage}
]
},
{
path: '/about', component: AboutPage
}
];
하위 레벨 의 끼 워 넣 기 는 무한 계속 할 수 있 음 을 주의 하 세 요.또한 TravelPage.vue 는 다음 과 같은 방식 으로 작성 할 수 있 습 니 다.
TravelPage.vue
<template>
<div id="travel">
<h2 class="row1">Travels</h2>
<div class="flex-container row2">
<router-link to="/travel/america">America</router-link>
<router-link to="/travel/china">China</router-link>
</div>
<router-view class="row3"></router-view>
</div>
</template>
<script>
export default {
name: 'TravelPage'
}
</script>
<style scoped>
div {
text-align: center;
}
#travel {
display: grid;
grid-template-rows: 20% 40% 40%;
}
.flex-container {
display: flex;
justify-content: space-around;
}
</style>
localhost:8080 이 검출 되 었 습 니 다.Travels 페이지 에 2 개의 하위 페이지 가 포함 되 어 있 습 니 다!모든 링크 를 클릭 하면 우리 의 URL 도 상응 하 게 업 데 이 트 됩 니 다.총결산
본 튜 토리 얼 이 당신 에 게 포 함 된 길 을 어떻게 사용 하 는 지 알 아 보 는 데 도움 이 되 기 를 바 랍 니 다!
이 주제 에 대한 기타 주의사항-우 리 는 동적 세그먼트 정의 로 를 사용 할 수 있 습 니 다.예 를 들 어 path:'/location/:id'.그리고 이 경로 의 보기에 서 이 id 를 this.$route.params 로 참조 할 수 있 습 니 다.사이트 와 애플 리 케 이 션 에 더 많은 특정 유형의 데이터(사용자,사진 등)를 표시 하고 싶 을 때 이 기능 은 매우 유용 하 다.
vue.js Router 에 포 함 된 경로 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue.js 포 함 된 경로 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.