Vue 3에서 Vue 라우터를 사용하여 Cat 사실 응용 프로그램을 구축합니다!
오늘 우리는 Vue 공유기와 합성 API를 사용하여 완전한 typescript를 지원하는cat 사실 웹 페이지를 만드는 것을 연구할 것이다.이 동영상이 끝날 때, 새로 추가된
useRoute 및 useRouter 합성 함수를 어떻게 성공적으로 사용하는지 전면적으로 알고 싶을 것입니다.Vue 2와 Vue 3 간의 변경 사항과 다음과 같은 고급 기능도 소개합니다.
만약 네가 새로 왔다면, 나를 따라 나의 유튜브 채널을 구독하는 것을 잊지 마라.github 에서 전체 소스 코드를 가져올 수 있습니다.
프로젝트 설정
기본 Vue 3 응용 프로그램을 만들고 템플릿 코드를 삭제했습니다.CLI 도구를 사용하여 프로젝트를 설정할 때 Vue 라우터와 typescript를 사용하는 것을 잊지 마십시오. 또한 가장 좋아하는 패키지 관리자를 사용하여 수동으로 설치할 수도 있습니다.
이 항목을 확인하면 CLI가 라우터 폴더와 뷰 폴더를 생성한 것을 볼 수 있습니다.공유기 폴더는 하나의 그룹에 있는 모든 루트 경로와 구성 요소를 포함합니다. 루트가 일치할 때까지 이 루트는 교체됩니다.일단 우리가 구성 요소와 보기를 만들면, 우리는 이 파일로 돌아갈 것이다.
// router/index.ts
const routes: Array<RouteRecordRaw> = [
// ...
]
const router = createRouter({
history: createWebHistory(),
routes
})
홈 페이지
우리는 홈페이지를 만드는 것부터 시작할 것이다. 왜냐하면 이것은 가장 직접적인 절차가 될 것이다.우리가 해야 할 일은 환영 메시지를 표시하고 공유기의 기본 URL에 추가하는 것이다.
<template>
<div class="card">
<div class="card-body text-center">
<h4>
Welcome to the cat facts page
</h4>
<div>🐾</div>
<span>
Use the nav menu above to find new facts!
</span>
</div>
</div>
</template>
// router/index.ts
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
}
]
동적 라우팅
다음으로, 우리는 사실 페이지를 만들 것이다.URL은 특정 사실을 표시하는 인덱스로 사용되는 id 인자를 사용합니다.useRoute 함수를 호출해서 이 속성에 접근할 수 있습니다. 이 함수는 현재 루트 정보를 포함하는 반응 대상을 되돌려줍니다.
export default defineComponent({
components: { FactCard },
setup() {
const router = useRoute()
const factId = computed(() => router.params.id) as ComputedRef<string>
return { factId }
}
})
텍스트와 그림을 포함하는 그룹을 만들었습니다.
// assets/facts.ts
export const facts = [
// ...
{
image:
'https://cdn.pixabay.com/photo/2016/02/10/16/37/cat-1192026_960_720.jpg',
text: "The world's largest cat measured 48.5 inches long."
}
// ...
]
마지막으로, 우리는 사실 보기를 공유기에 추가할 수 있습니다. id가 동적 값임을 표시하기 위해 사칭을 사용하는 것을 알 수 있습니다.만약 우리가 유사한 URL
/fact/3을 가지고 있다면, 이것은 id 속성을 3으로 설정할 것이다. 마치 Vue2와 같다.사용useRoute 대신 도구를 통해 동적 세그먼트를 구성 요소에 전달할 수 있습니다.// router/index.ts
const routes: Array<RouteRecordRaw> = [
// ...
{
path: '/fact/:id',
name: 'Fact',
component: () => import('../views/Fact.vue'),
beforeEnter: (to, _, next) => {
const { id } = to.params
if (Array.isArray(id)) {
next({ path: '/error' })
return
}
// Is a valid index number
const index = parseInt(id)
if (index < 0 || index >= facts.length) {
next({ path: '/error' })
return
}
next()
}
}
// ...
]
프로그래밍 라우팅
사실 목록 페이지에서 우리는 For를 사용하여 모든 사실을 순환하고 교체하며 정보를 표시할 수 있습니다.HTML 요소를 눌렀을 때, 우리는 프로그래밍을 통해 사용자를 사실 페이지로 다시 정할 수 있는 함수를 호출할 수 있다.
이를 위해 userRouter 연결을 사용할 수 있습니다. 이 연결은 현재 Vue 공유기의 실례를 조작하는 함수를 포함합니다.우리는push 함수를 호출하여 대상을 전달할 수 있으며, 어디로 가고 싶은지 알려줄 수 있다.
<script lang="ts">
import { defineComponent } from 'vue'
import { facts } from '@/assets/facts'
import { useRouter } from 'vue-router'
export default defineComponent({
setup() {
const router = useRouter()
const goToFact = (id: number) => {
router.push({ path: `/fact/${id}` })
}
return { facts, goToFact }
}
})
</script>
<template>
<div class="list-group">
<a
class="list-group-item list-group-item-action clickable"
v-for="(fact, i) in facts"
:key="i"
@click="goToFact(i)"
>
<div class="row">
<div class="col-2"><img :src="fact.image" height="40" /></div>
<div class="col-10 align-self-center">{{ fact.text }}</div>
</div>
</a>
</div>
</template>
이 보기를 라우터에 추가할 수 있습니다. 특별한 조건이 필요하지 않습니다.
<라우터 링크>
네비게이션 표시줄에 대해 우리는 두 개의 구성 요소를 만들어야 한다.
HeaderLink, 를 클릭하면 구성 요소를 사용하여 사용자를 URL로 리디렉션합니다.이 슬롯은 어셈블리 내의 중첩된 HTML만 보여주는 데 사용됩니다.현재 URL이 전송된 경로 값으로 시작하거나 같을 때 특수한 클래스도 적용됩니다.
<script>
import { computed, defineComponent } from 'vue'
import { useRoute } from 'vue-router'
export default defineComponent({
props: {
to: { type: String, required: true },
exact: { type: Boolean, default: false }
},
setup(props) {
const route = useRoute()
const active = computed(() =>
props.exact ? route.path === props.to : route.path.startsWith(props.to)
)
return { active }
}
})
</script>
<template>
<div style="width: 150px">
<router-link
:to="to"
class="nav-link"
:class="active ? 'font-weight-bold' : null"
>
<slot />
</router-link>
</div>
</template>
<template>
<div class="text-center my-3">
<h4>Cat 🐱 Facts</h4>
<div class="d-flex justify-content-center">
<HeaderLink to="/" exact>Home</HeaderLink>
<HeaderLink to="/facts">List</HeaderLink>
</div>
</div>
</template>
오류 페이지
마지막으로, 우리는 공유기가 어떤 루트와 일치하지 않을 때 어떻게 해야 하는지 알려줘야 한다. 우리가 Vue3에서 이렇게 하는 방식은 약간 다르다.만약 우리가 마지막에 구성 요소를 찾지 못했다면, 이것은 페이지를 찾지 못했다는 것을 의미하며, 사용자 정의 404 페이지 구성 요소를 추가할 수 있습니다.우리는 동적 세그먼트에서catchAll과 정규 표현식을 사용하여 이 점을 실현할 수 있으며, 동적 세그먼트는 모든 내용과 일치할 것이다.
// router/index.ts
const routes: Array<RouteRecordRaw> = [
// ...
{
path: '/:catchAll(.*)',
name: 'PageNotFound',
component: () => import('../views/PageNotFound.vue')
}
// ...
]
Reference
이 문제에 관하여(Vue 3에서 Vue 라우터를 사용하여 Cat 사실 응용 프로그램을 구축합니다!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jsbroks/building-a-cat-facts-app-with-vue-router-in-vue-3-d0l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
