Vue 페이지 점프에 무슨 일이 일어나고 있나요?

Vue는 단일 페이지 애플리케이션(SPA)을 구축하는 데 일반적으로 사용되는 최신 JavaScript 프레임워크입니다. SPA를 사용하면 사용자는 전체 페이지를 다시 로드하지 않고도 다양한 페이지와 페이지 구성 요소를 탐색할 수 있습니다. Vue에서 페이지 점프는 주로 라우팅을 통해 구현됩니다.

라우팅은 URI를 구성 요소에 매핑하는 메커니즘입니다. URI는 "https://example.com/user/123"과 같은 URL의 일부입니다. URI의 /user/123 부분을 라우팅 경로라고 합니다. Vue에서는 Vue Router를 통해 라우팅이 구현됩니다.

Vue Router는 Vue.js의 공식 라우팅 관리자입니다. Vue Router를 사용하면 경로를 정의하고 라우팅 경로를 Vue 구성 요소에 매핑할 수 있습니다. Vue Router는 경로 탐색 기능도 제공하므로 사용자는 전체 페이지를 다시 로드하지 않고도 다른 페이지와 페이지 구성 요소를 탐색할 수 있습니다. 경로 탐색은 링크(예: ) 또는 프로그래밍 방식(예: this.$router.push('/'))을 통해 구현할 수 있습니다.

Vue Router의 기본 사용법은 다음과 같습니다.

1. Vue Router 설치

npm install vue-router

2. 경로 생성

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

위 코드에서는 "home"과 "about"이라는 두 개의 경로가 매핑되어 있습니다. 홈 및 정보 구성 요소에. 라우팅 경로는 각각 "/" 및 "/about"입니다.

3. Vue 구성 요소에서 라우팅 사용

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

위 코드에서는 <router-link> 구성 요소를 사용하여 경로 링크를 생성하고 <router- view> ; 구성 요소는 현재 경로와 일치하는 구성 요소를 렌더링합니다. <router-link>组件来创建路由链接，并使用<router-view>组件来渲染当前路由匹配的组件。

4. 导航到不同的路由

<template>
  <div>
    <button @click="goToHome">Go to Home</button>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/')
    },
    goToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

在上面的代码中，我们通过编程方式导航到不同的路由。使用this.$router.push()

다른 경로로 이동
rrreee🎜 위 코드에서는 프로그래밍 방식으로 다른 경로로 이동합니다. 현재 라우팅 경로를 새 경로로 변경하려면 this.$router.push() 메서드를 사용하세요. 🎜🎜간단히 말해서 Vue Router는 유연하고 사용하기 쉬운 라우팅 메커니즘을 제공합니다. 경로를 정의하고 Vue 구성 요소에 대한 경로 경로를 매핑함으로써 단일 페이지 애플리케이션을 만들고 사용자가 전체 페이지를 다시 로드하지 않고도 다른 페이지와 페이지 구성 요소로 이동할 수 있도록 할 수 있습니다. 🎜

위 내용은 Vue 페이지 점프에 무슨 일이 일어나고 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!