Vue 라우터 가이드

개요

빌드하지 않는 한 Vue.js로 웹 애플리케이션을 개발할 때 단일 페이지 애플리케이션 (SPA), 사용자가 탐색할 수 있도록 여러 페이지를 방문 페이지에 연결하려고 합니다. 이것은 다음과 같이 알려져 있습니다. 라우팅.

라우팅은 사용자가 웹사이트의 다른 페이지로 이동하는 프로세스입니다. Vue.js는 단일 페이지 앱을 만드는 데 사용되는 JavaScript 프레임워크입니다. 즉, 이 애플리케이션은 서버에서 브라우저로 한 번만 로드되고 브라우저는 라우팅할 때 다시 로드할 필요가 없습니다. 대신 단순히 이러한 페이지를 요청하고 로드됩니다.

이 가이드에서는 Vue.js를 사용하여 라우팅을 수행하는 방법을 배우고 수행할 수 있는 다양한 유형의 라우팅과 수행 방법에 대해 자세히 알아봅니다.

시작 가이드

Vue.js의 라우팅은 다음과 같이 수행됩니다. Vue 라우터, 핵심 Vue 라이브러리와 함께 작동하여 라우팅 시스템을 설정할 수 있습니다. 우리는 사용하고 싶습니다 vue-router 우리 프로젝트의 두 가지 시나리오에서. 우리는 기존 프로젝트에서 라우터를 사용하거나 새 프로젝트를 만드는 동안 라우터를 추가하려고 합니다.

기존 프로젝트에서 Vue 라우터 설정

통합 vue-router 기존 프로젝트에 적용하는 것은 기술적인 작업일 수 있으며 이제 이러한 세부 정보를 살펴보겠습니다. 첫 번째 단계는 다음 명령을 사용하여 vue 라우터 패키지를 설치하는 것입니다.

! npm install vue-router@4

설치가 완료되면 다음으로 이동합니다. src 폴더를 만들고 이라는 폴더를 만듭니다. router, 다음에 오는 파일 index.js FBI 증오 범죄 보고서 router 라우터 구성 파일로 사용할 폴더입니다. 우리의 src 디렉토리는 이제 다음과 같이 보일 것입니다:

. index.js 파일에서 라우터 구성 코드인 아래 코드를 붙여넣도록 합시다.

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

우리는이 routes 각 개체가 단일 경로를 나타내는 여러 개체일 수 있는 단일 개체를 포함하는 배열입니다. 당분간은 홈페이지 구성 요소로 리디렉션되는 항목만 만들었습니다.

이들 각각 routes 객체는 일반적으로 다음으로 구성됩니다. path, 사이트 루트에 상대적인 URL 경로, name, 식별자 역할을 하는 component, 페이지 상단에서 가져온 것입니다.

경로 배열을 제외하고, 우리는 다음을 생성하여 맨 아래에 라우터 인스턴스를 설정합니다. createRouter() 함수 및 전달 history 키 값과 routes 배열, 그리고 우리는 내보냅니다 router 애플리케이션 내에서 사용할 인스턴스입니다.

애플리케이션 내에서 이 라우터 구성을 사용하려면 main.js 에 파일을 src 폴더, import router from "./router", 추가 .use(router) 사이에 createApp(App) 와 .mount('#app') 아래와 같이:

import router from './router' createApp(App).use(router).mount('#app')

이 vue-router 애플리케이션 내에서 전역적으로 구성되었으며 다음 단계는 애플리케이션 내에서 사용하는 것입니다. 이것은 다음을 포함하여 쉽게 수행됩니다. <router-view /> 이내 App.js 일치하는 경로만 렌더링하는 템플릿 태그:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Vue.js에서 경로 설정

경로는 일반적으로 router/index.js 파일의 경로 배열이며 이러한 경로는 구성 요소에 연결됩니다. 모든 페이지 보기가 저장될 보기 폴더를 만드는 것이 좋습니다. 예를 들어:

이제 수동으로 경로를 설정하는 방법을 알게 되었습니다.

Vue CLI로 Vue 라우터 설치

새 프로젝트를 만들려고 하고 다음을 사용할 것이라고 생각하는 경우 vue-router, 프로젝트를 생성하는 동안 그렇게 하는 것이 더 쉽습니다.

Vue CLI를 사용하여 최신 버전을 설치하기만 하면 됩니다. vue-router 프로젝트를 만드는 과정에서 수동으로 기능을 선택하는 동안:

우리를 통해 Vue.js 프로젝트 생성에 대해 읽고 자세히 알아보십시오. Vue CLI 가이드!

Vue 라우터를 사용한 지연 로드 경로

애플리케이션의 크기가 커지면 번들 크기가 커져 사이트를 로드하는 데 시간이 더 오래 걸립니다. 우리는 사용할 수 있습니다 vue-router 사용자가 구체적으로 요청할 때까지 일부 특정 경로를 로드하지 않도록 지연 로드를 구현합니다.

이것은 일반적으로 라우터 구성 파일에서 제거하여 수행됩니다. import 문을 맨 위에 표시하고 경로의 구성 요소 옵션에서 동적 가져오기 문으로 대체합니다.

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

다음을 사용하여 경로 간 탐색

지금까지 경로를 생성할 수 있었지만 애플리케이션 내에서 어떻게 탐색합니까? 우리는 사용 <router-link> 대신 태그 <a> 라우팅을 처리하는 HTML의 요소.

예를 들어 애플리케이션 상단에 탐색 모음을 만들고 싶다면 App.js 위의 파일 <router-view/> 모든 경로에 표시되도록 태그를 지정합니다.

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

라우터 링크는 to='path' 경로를 구성할 때 설정한 대로 사용자를 구성 요소의 경로로 안내하는 속성입니다. 이것은 다음과 같이 작동합니다. href='path``' HTML의 속성.

명명된 경로 사용

명명된 경로를 사용하면 name 액세스 권한이 있는 키 name 다음과 같이 데이터를 바인딩하여 경로를 사용하는 대신 경로를 구성하는 동안 설정한 속성:

<router-link :to="{ name: 'About' }">About</router-link>

이 방법을 사용하는 한 가지 장점은 대규모 애플리케이션의 경로 경로를 변경하기로 결정한 경우 번거로울 수 있는 모든 링크 경로 변경을 시작할 필요가 없다는 것입니다.

동적 라우팅

불필요한 페이지 반복을 피하기 위해 동적 라우팅을 사용해야 하는 상황이 발생할 수 있습니다. 예를 들어 과일 목록이 있고 사용자가 특정 과일을 클릭할 수 있도록 하고 해당 과일에 대한 세부 정보만 과일 세부 정보 페이지에 표시되기를 원한다고 가정합니다. 이 경우 동적 라우팅을 사용합니다.

두 페이지가 있습니다. 하나는 목록에 있는 과일을 보여주고 다른 하나는 각 과일의 세부 정보를 보여주는데, 이 페이지는 과일의 세부 정보로 채워질 "청사진" 페이지입니다. Vue 폴더에 페이지를 만든 다음 경로를 추가합니다. routes 정렬:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

우리는 FruitDetails 페이지, 우리는 동적 id 속성을 가져옵니다. id 매개변수를 사용하여 해당 페이지에 표시되는 특정 데이터를 쿼리하는 데 사용합니다. $route.params 따라서 경로를 동적으로 만듭니다.

. FruitsPage, 응용 프로그램에 루프하는 과일 배열이 있다고 가정하면 다음과 같이 params와 함께 링크로 각 과일을 래핑할 수 있습니다.

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

이 시점에서 사용자가 각 과일을 클릭하면 FruitDetails 액세스할 수 있는 페이지 id 매개변수를 사용하고 어떤 과일의 세부 정보가 표시되어야 하는지 식별하는 데 사용합니다. FruitDetails 페이지.

경로 매개변수에 액세스

지금까지 매개변수를 특정 페이지에 동적으로 전달하는 방법을 살펴보았습니다. 이제 FruitDetails 페이지. Vue에서 매개변수에 액세스할 수 있는 두 가지 방법이 있습니다. $route.params 또는 소품 사용:

사용 $route.params

매개변수는 다음을 통해 직접 액세스할 수 있습니다. $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

또는 우리 내에서 액세스할 수 있습니다. data() 사용 방법 this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

Vue 소품 사용하기

경로를 통해 동적으로 데이터에 액세스하는 또 다른 쉬운 방법은 props를 사용하는 것입니다. 우리는 먼저 설정해야합니다 props 에 true 경로 구성 개체에서:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

이 방법으로 다음에 해야 할 일은 다음을 추가하는 것입니다. props 옵션을 script 태그를 지정하고 template 태그 :

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

404 오류 – 경로를 찾을 수 없음

사용자가 존재하지 않는 경로로 이동하는 경우 Vue는 페이지를 로드하지만 구성 요소 없이 빈 페이지를 생성합니다. 이 경우 가장 좋은 방법은 404 페이지에 페이지를 표시하는 것입니다. 여기에는 사용자를 홈페이지나 가고자 하는 곳으로 연결하는 버튼이 있습니다.

이것은 404 페이지에 대한 구성 요소를 만든 다음 라우터 구성 파일의 route 배열에 404 경로를 추가하여 쉽게 처리되지만 이번에는 이전에 선언되지 않은 모든 경로를 포착하기 위해 정규식을 사용할 것입니다.

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

XNUMXD덴탈의 :catchAll 는 정규식을 수신하는 동적 세그먼트입니다. (.*) Vue Router가 사용자가 탐색하는 경로가 라우터의 구성 파일에 정의되어 있는지 확인하는 데 사용합니다. 그러한 경로가 존재하지 않으면 사용자는 구성 요소로 이동합니다. 이 경우에는 ErrorPage 구성 요소:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

리디렉션

사용자가 특정 경로를 방문할 때 리디렉션되기를 원하는 상황에서, 예를 들어 더 이상 사용하지 않는 이전 경로가 있는 경우 사용자가 해당 경로를 방문할 때 새 경로로 리디렉션되기를 원합니다. 이것은 route 구성 배열에 새 객체를 추가하여 쉽게 수행할 수 있습니다. redirect 들:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

위의 모든 코드는 사용자가 방문하면 경로 /all-fruits, 그것은 그들을 리디렉션합니다 /fruits 경로.

프로그래밍 방식 탐색

지금까지 라우팅에 대해 많이 배웠지만 한 가지 더 알고 싶은 것이 있습니다. 바로 프로그래밍 방식 탐색을 수행하는 방법입니다. 프로그래밍 방식 탐색은 로그인 또는 가입 작업과 같이 경로에서 발생하는 특정 작업을 기반으로 하거나 "돌아가기" 버튼과 같은 특정 버튼을 클릭하여 사용자가 리디렉션/지정되는 상황으로 정의합니다.

라우터 기록

브라우저 기록을 사용하여 기본 설정에 따라 앞뒤로 쉽게 탐색할 수 있습니다. 당신이 기억한다면, 우리는 createRouter() 우리가 설정한 라우터 구성 파일의 기능 history Vue 라우터는 웹 애플리케이션을 통해 라우팅할 때 라우터 기록을 추적할 수 있습니다.

이렇게 하면 버튼 클릭과 같은 조건에 따라 브라우저의 기록을 탐색할 수 있습니다.

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

우리는 또한 다음을 사용하여 진행하기로 결정할 수 있습니다. 1 대신 -1 2단계로 이동하고 싶다고 가정해 보겠습니다. 둘 중 하나를 사용할 수 있습니다. 2 or -2.

푸시

push() 일반적으로 작업이 발생한 후에 사용되며 기록 스택에 새 항목을 추가합니다. 예를 들어 사용자가 성공적으로 로그인하면 프로그래밍 방식으로 대시보드 페이지로 이동하려고 합니다. 이것은 라우트 이름 옆에 push 메소드를 포함함으로써 달성됩니다:

this.$router.push({ name: 'Dashboard' });

결론

라우팅은 Vue의 핵심 기능 중 하나입니다. 건물을 짓지 않는 한 단일 페이지 애플리케이션 (SPA), 사용자가 탐색할 수 있도록 여러 페이지를 방문 페이지에 연결하려고 합니다.

이 가이드에서는 라우팅이 무엇인지, 어떻게 설치할 수 있는지 살펴보았습니다. vue-router 신규 및 기존 프로젝트에서 지연 로딩을 수행하는 방법, 경로 간 탐색, 동적 라우팅 수행, 경로 매개변수 액세스 및 프로그래밍 방식 탐색 수행.

• 코인스마트. 유럽 ​​최고의 비트코인 ​​및 암호화폐 거래소.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 무료 액세스.
• 크립토호크. 알트코인 레이더. 무료 시험판.
• 출처: https://stackabuse.com/guide-to-vue-router/