Vue [seven] 라우팅 vue-router의 간단한 사용
기사 디렉토리
머리말
라우팅은 브라우저 URL(Uniform Resource Locator)의 해시 값(#hash)과 디스플레이 보기 구성 요소 사이의 해당 규칙입니다. Web App에는 하나의 페이지를 통해 전체 애플리케이션을 표시하고 관리하는 기능이 종종 있습니다. SPA는 종종 복잡한 기능을 가진 응용 프로그램입니다.모든 보기 콘텐츠를 효과적으로 관리하기 위해 프런트 엔드 라우팅이 생겼습니다.경로 간 전환이 페이지를 다시 새로 고치지 않는다는 장점이 있지만 초기 로드가 느립니다.
1. 라우팅 - 부품 분류
.vue 파일에는 두 가지 유형이 있습니다.
- 페이지 구성요소
- 재사용 가능한 구성 요소
본질적으로 두 유형 간에 차이는 없지만 페이지 구성 요소는 src/views 폴더에, 재사용 가능한 구성 요소는 src/components 폴더에 넣는 것이 일반적입니다.
페이지 구성 요소: 페이지 표시는 라우팅과 함께 사용됩니다.
재사용 가능한 구성 요소: 재사용에 자주 사용되는 데이터를 표시합니다.
요약: 라우팅 스위칭과 결합된 보기 아래의 페이지 구성 요소는 일반적으로 디스플레이 데이터를 재사용하기 위해 보기 아래의 vue로 가져옵니다.
둘, vue-router 준비
보기에서 만들기 Your.vue, 세 My.vue가지 It.vue구성 요소:
Your.vue 구성 요소는 다음과 같습니다.
<template>
<div>
// My组件为My，It组件为It
Your组件
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
App.vue 구성 요소에 다음을 추가합니다.
<template>
<div>
<div class="footer_wrap">
<a href="#/your">你的</a>
<a href="#/my">我的</a>
<a href="#/it">他的</a>
</div>
<div class="top">
</div>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
.footer_wrap {
position: fixed;
left: 0;
top: 0;
display: flex;
width: 100%;
text-align: center;
background-color: #333;
color: #ccc;
}
.footer_wrap a {
flex: 1;
text-decoration: none;
padding: 20px 0;
line-height: 20px;
background-color: #333;
color: #ccc;
border: 1px solid black;
}
.footer_wrap a:hover {
background-color: #555;
}
.top {
padding-top: 62px;
}
</style>
3. vue-router 사용
- vue-router 설치
npm i [email protected]
vue2의 버전은 경로의 버전을 지정해야 합니다. 버전이 너무 높으면 오류가 보고됩니다. 현재 최신 경로 버전은 vue3과 일치합니다.
- 수입
main.js_
import VueRouter from 'vue-router'
main.js라우팅 플러그인 사용
Vue.use(VueRouter)
팁: vue에서 플러그인을 사용하려면 Vue.use()를 호출해야 합니다.
main.js경로 개체 만들기
const router = new VueRouter({
})
main.js렌더를 마운트
new Vue({
router,
render: h => h(App),
}).$mount('#app')
구성이 완료되면 아래 그림과 같이 주소 표시줄에 #이 추가됩니다.
4. 라우팅 규칙 구성
라우팅 개체에서 라우팅 규칙 구성:
세 가지 구성 요소가 있고 세 가지 라우팅 규칙을 구성합니다.
const router = new VueRouter({
routes: [{
path: '/your', //路由地址
name:'your' //路由名字，可以不写
component: Your //在这个地址下路由跳转的组件
},
{
path: '/my',
component: My
},
{
path: '/it',
component: It
}
]
})
== 라우팅 규칙을 구성한 후 라우팅 출구도 구성해야 합니다. 이는 초보자가 잊기 쉽습니다 ==
App.vue에서 출구를 구성해 보겠습니다.
<template>
<div>
<div class="footer_wrap">
<a href="#/your">你的</a>
<a href="#/my">我的</a>
<a href="#/it">他的</a>
</div>
<div class="top">
+ <router-view></router-view>
</div>
</div>
</template>
이 시점에서 효과 다이어그램은 다음과 같습니다.
지금까지: 라우팅의 간단한 사용이 완료되었습니다.
요약하다
이 기사는 주로 vue-router의 기본 사용법에 대해 간단히 설명합니다. 라우팅 캡슐화, 선언적 탐색 및 프로그래밍 방식 탐색과 같은 라우팅의 다른 사용법은 블로거의 후속 기사에서 설명합니다. (블로거를 팔로우하고 길을 잃지 마십시오)