Vue에서 프런트 엔드 라우팅 점프를 구현하는 방법은 무엇입니까?

Vue는 애플리케이션 개발에서 뛰어난 프런트엔드 프레임워크입니다. 프런트엔드 경로 점프는 매우 일반적인 요구 사항입니다. Vue는 라우팅 점프를 구현하는 풍부한 기능을 제공합니다. 이 기사에서는 Vue의 내장 라우팅 구현과 타사 라우팅 라이브러리 Vue-Router의 사용을 소개합니다.

1. Vue의 내장 라우팅 구현

Vue에서는 내장된 vue-router를 사용하여 프런트엔드 라우팅 점프를 구현할 수 있습니다.

1. vue-router 설치

npm 명령을 사용하여 vue-router 라이브러리 설치:

npm install vue-router

2. 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 인스턴스에 배치됩니다.

3. 라우팅 구성

Vue 라우터 객체를 생성할 때 라우팅을 구성해야 합니다. Vue Router의 구성에는 주로 라우팅 경로, 라우팅 구성 요소, 라우팅 별칭 및 기타 매개 변수가 포함됩니다. 라우팅 경로는 URL의 경로 부분에 해당하며 라우팅 구성 요소는 경로 아래에 표시될 구성 요소를 정의합니다.

예를 들어 페이지에 대한 경로를 생성하려는 경우 경로를 구성할 때 다음과 같이 작성할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    }
  ]
})

그 중 라우팅 경로는 "/about"이고 해당 구성 요소는 About입니다.

4. Route Jump

라우팅 구성을 통해 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를 사용하여 프런트엔드 라우팅 점프를 구현하는 방법을 살펴보겠습니다.

1. Vue-Router 설치

Vue-Router를 사용하기 전에 먼저 프로젝트에 설치해야 합니다. npm 명령을 사용하여 설치할 수 있습니다.

npm install vue-router --save

2. 라우팅 인스턴스 생성

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를 사용한다는 의미입니다.

3. Register Route

라우팅 인스턴스를 생성한 후 라우팅 인스턴스를 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를 전달해야 합니다.

4. 경로 점프

Vue-Router는 다음과 같이 경로 점프를 구현하는 다양한 방법을 제공합니다.

• 라우터 링크 구성 요소 사용
• Vue 구성 요소에서 this.$router.push() 메서드 사용;
Vue 구성 요소에서 this.$router.replace() 메서드를 사용하세요.
• Vue 구성 요소에서 this.$router.go() 메서드를 사용하세요.
• Vue 구성 요소 메서드에서 this.$route.back()을 사용하세요.

예를 들어 Vue 구성 요소에서 router.push 메서드를 사용하여 라우팅 점프를 구현합니다.

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.push 메서드를 사용합니다. handlerRoute 메소드. 경로 점프. 이 중 name 필드는 router-link 또는 라우팅 정보의 name 속성에 해당하고, params는 라우팅에 필요한 동적 매개변수를 포함하는 객체이다.

결론

Vue-Router는 매우 강력하고 사용하기 쉬운 라우팅 관리자입니다. Vue 애플리케이션에서 Vue-Router를 사용하면 경로 점프 및 경로 점프에 필요한 매개변수 전송을 쉽게 구현할 수 있습니다. 개발자의 경우 이는 단일 페이지 애플리케이션 작성을 매우 간단하고 효율적으로 만듭니다.

위 내용은 Vue에서 프런트 엔드 라우팅 점프를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!