Vue는 애플리케이션 개발에서 뛰어난 프런트엔드 프레임워크입니다. 프런트엔드 경로 점프는 매우 일반적인 요구 사항입니다. Vue는 라우팅 점프를 구현하는 풍부한 기능을 제공합니다. 이 기사에서는 Vue의 내장 라우팅 구현과 타사 라우팅 라이브러리 Vue-Router의 사용을 소개합니다.
1. Vue의 내장 라우팅 구현
Vue에서는 내장된 vue-router를 사용하여 프런트엔드 라우팅 점프를 구현할 수 있습니다.
npm 명령을 사용하여 vue-router 라이브러리 설치:
npm install vue-router
Vue 프로젝트 기본 파일(예: main.js)에 Vue Router 개체 만들기 및 Vue 인스턴스에 바인딩합니다. 아래와 같이
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
// 路由配置
})
new Vue({
router
}).$mount('#app')코드에서 먼저 vue-router를 도입하고 이를 Vue 인스턴스에 바인딩합니다. 그런 다음 Vue Router 객체가 생성되어 Vue 인스턴스에 배치됩니다.
Vue 라우터 객체를 생성할 때 라우팅을 구성해야 합니다. Vue Router의 구성에는 주로 라우팅 경로, 라우팅 구성 요소, 라우팅 별칭 및 기타 매개 변수가 포함됩니다. 라우팅 경로는 URL의 경로 부분에 해당하며 라우팅 구성 요소는 경로 아래에 표시될 구성 요소를 정의합니다.
예를 들어 페이지에 대한 경로를 생성하려는 경우 경로를 구성할 때 다음과 같이 작성할 수 있습니다.
const router = new VueRouter({
routes: [
{
path: '/about',
component: About
}
]
})그 중 라우팅 경로는 "/about"이고 해당 구성 요소는 About입니다.
라우팅 구성을 통해 Vue Router에 내장된 루트 점프 기능을 사용할 수 있습니다. Vue Router는 경로 점프를 구현하기 위해 router-link 태그와 router.push 메소드를 제공합니다.
1) 라우터 링크 태그 사용
HTML 템플릿에서 라우터 링크 태그를 사용하여 라우팅 링크를 만들 수 있습니다. 라우터 링크 태그는 라우팅 구성에 따라 올바른 URL을 자동으로 생성합니다.
예:
<router-link to="/about">关于我们</router-link>
회사 소개 링크를 클릭하면 구성된 라우팅 경로 "/about"에 해당하는 구성 요소 페이지로 이동합니다.
2) router.push 메소드를 사용하세요
라우터 링크 태그를 사용하는 것 외에도 Vue Router는 경로 점프를 구현하기 위해 router.push 메소드도 제공합니다.
예:
this.$router.push('/about')Vue 구성 요소에서는 this.$router를 사용하여 Vue Router 인스턴스를 가져오고 push 메서드를 사용하여 점프를 구현할 수 있습니다. 이 코드는 라우팅 경로 "/about"이 있는 구성 요소 페이지로 이동합니다.
2. Vue-router
Vue-Router는 Vue.js를 기반으로 하는 공식 라우터입니다. Vue.js에서 공식 출시한 라우팅 관리자로 라우팅 중첩, 동적 라우팅, 경로 지연 로딩 등과 같은 강력한 기능을 제공합니다. Vue-Router를 사용하여 프런트엔드 라우팅 점프를 구현하는 방법을 살펴보겠습니다.
Vue-Router를 사용하기 전에 먼저 프로젝트에 설치해야 합니다. npm 명령을 사용하여 설치할 수 있습니다.
npm install vue-router --save
Vue 경로를 생성할 때 먼저 배열로 점프해야 하는 페이지 구성 요소(중첩 하위 구성 요소 포함)의 관련 라우팅 정보를 구성할 수 있습니다.
예:
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/user/:id',
component: User
}
]이 배열은 세 가지 라우팅 정보를 정의합니다. 첫 번째 라우팅 정보는 기본 점프 페이지를 Home으로 정의하고, 두 번째 라우팅 정보는 점프 페이지를 About으로 정의하고, 세 번째 라우팅 정보는 점프 페이지를 User로 정의합니다. 라우팅 정보는 id 매개변수를 전달해야 합니다.
다음으로 Vue-Router의 createRouter 메소드를 통해 라우팅 인스턴스를 생성할 수 있습니다.
예:
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes
})코드에서는 Vue-Router의 createRouter 메소드를 사용하여 라우팅 인스턴스를 생성하고 라우팅 기록 관리 방법 및 라우팅 정보를 정의합니다. 그 중 createWebHistory는 라우팅 관리를 위해 HTML5 History API를 사용한다는 의미입니다.
라우팅 인스턴스를 생성한 후 라우팅 인스턴스를 Vue 애플리케이션 인스턴스에 등록해야 합니다.
예:
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'
createApp(App)
.use(router)
.mount('#app')코드에서는 createApp의 사용 메소드를 통해 라우팅 인스턴스를 Vue 애플리케이션 인스턴스에 등록합니다.
라우팅 인스턴스를 등록하는 것 외에도 Vue-Router에서 제공하는 라우팅 탐색 구성 요소인 router-view 및 라우팅 링크 구성 요소인 router-link를 통해 라우팅 점프를 구현할 수도 있습니다.
예:
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link :to="{name: 'user', params: {id: userId}}">User</router-link>
<router-view></router-view>코드에서는 router-link 태그를 사용하여 세 개의 점프 링크를 만들고, router-view 태그를 사용하여 라우팅 구성 요소의 해당 콘텐츠를 표시합니다. 세 번째 링크는 동적 매개변수 ID를 전달해야 합니다.
Vue-Router는 다음과 같이 경로 점프를 구현하는 다양한 방법을 제공합니다.
import { reactive } from 'vue'
export default {
setup() {
const state = reactive({
userId: ''
})
const handleRoute = function() {
router.push({
name: 'user',
params: { id: state.userId }
})
}
return {
state,
handleRoute
}
}
}Vue-Router는 매우 강력하고 사용하기 쉬운 라우팅 관리자입니다. Vue 애플리케이션에서 Vue-Router를 사용하면 경로 점프 및 경로 점프에 필요한 매개변수 전송을 쉽게 구현할 수 있습니다. 개발자의 경우 이는 단일 페이지 애플리케이션 작성을 매우 간단하고 효율적으로 만듭니다.
위 내용은 Vue에서 프런트 엔드 라우팅 점프를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
