Vue Router에서 점프를 구현하는 방법

Vue는 현재 가장 인기 있는 프런트 엔드 프레임워크 중 하나이며 개발자가 웹 애플리케이션을 보다 빠르고 쉽게 개발하는 데 도움이 되는 다양한 도구를 제공합니다. 가장 일반적으로 사용되는 것은 Vue Router입니다. Vue Router는 Vue.js의 공식 라우팅 관리자로 SPA 애플리케이션(단일 페이지 애플리케이션)에서 구성 요소 전환을 쉽게 구현할 수 있습니다. 그래서 이번 글에서는 Vue Router가 어떻게 점프를 구현하는지 자세히 소개하겠습니다.

1. Vue Router의 기본 개념

Vue Router는 Vue.js를 기반으로 하는 공식 라우팅 관리자입니다. 라우팅을 통해 다양한 페이지 구성요소를 분리하고, 분리된 구성요소를 보다 유연하게 관리하고 사용할 수 있습니다. 그중 Vue Router에는 다음과 같은 중요한 개념이 있습니다.

1. Routing

Routing은 페이지의 경로를 나타냅니다. 다른 경로에 액세스하면 다른 페이지나 구성 요소가 표시될 수 있습니다. 경로에는 동적 매개변수가 포함될 수 있으며 이러한 매개변수를 사용하여 페이지 동작, 구성 요소 표시 효과 등을 제어할 수 있습니다.

2. Router

Router는 전체 페이지의 라우팅을 관리하는 데 사용되는 Vue.js의 인스턴스입니다. 라우터를 사용하여 경로를 전환하고 경로 변경 및 기타 작업을 모니터링할 수 있습니다.

3. 라우팅 구성요소

라우팅 구성요소는 로그인 페이지, 홈페이지, 사용자 페이지 등 라우팅에 표시하려는 다양한 구성요소입니다.

4. 경로 보기

경로 보기는 <라우터 보기> 구성 요소이며, 해당 기능은 경로가 변경될 때 해당 구성 요소를 동적으로 표시하는 것입니다.

2. Vue Router에서 점프하는 세 가지 방법

Vue Router에서는 다음 세 가지 방법으로 점프할 수 있습니다.

1. 선언적 탐색

라우터 링크 태그를 사용하여 점프하면 사용자의 클릭 이벤트를 변환할 수 있습니다. 프로그램에서 라우팅 변환에 ​​들어갑니다. 선언적 탐색을 사용하면 URL을 직접 조작하고 태그를 사용할 때 발생하는 일부 문제를 피할 수 있습니다.

코드 예:

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

2. 프로그래밍 방식 탐색

이벤트 메소드에서 $router 객체를 호출하고 푸시 또는 교체 메소드를 사용하여 지정된 페이지로 이동합니다. 프로그래밍 방식 탐색을 사용하면 경로 점프 동작을 쉽게 제어할 수 있으며, $route 객체를 사용하면 경로 매개변수에 액세스하고 점프 시 유연하게 처리할 수 있습니다.

코드 예:

<template>
  <div>
    <button @click="toHome">to Home</button>
    <button @click="toAbout">to About</button>
  </div>
</template>

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

3. Redirect

Redirect는 경로가 지정된 페이지로 이동하기 전에 다른 페이지로 이동한다는 의미입니다. 리디렉션 방법을 사용하면 불필요한 중간 단계를 생략하고 필요한 페이지에 직접 액세스할 수 있는 리디렉션을 구현할 수 있습니다.

코드 예:

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

3. Vue 라우터 매개변수 전달

웹 애플리케이션 개발에서는 경로 간에 매개변수를 전달하고 서로 다른 매개변수를 기반으로 서로 다른 페이지를 표시해야 하는 경우가 많습니다. Vue Router에서는 동적 라우팅과 쿼리 매개변수라는 두 가지 방법으로 경로 간에 매개변수를 전달할 수 있습니다.

1. 동적 라우팅

동적 라우팅은 경로에 특정 매개변수를 추가한 다음 이러한 매개변수를 사용하여 페이지 동작을 제어하는 ​​것을 의미합니다. 동적 라우팅의 매개변수 전송 방법은 비교적 유연하며 매개변수 값은 경로가 변경될 때 언제든지 업데이트될 수 있습니다.

코드 예:

// 配置路由
const router = new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'goods',
      component: () => import('@/views/Goods'),
    }
  ]
})

// 带参跳转
this.$router.push({
  name: 'goods',
  params: {
    id: 1
  }
})

// 获取参数值
this.$route.params.id

2. 쿼리 매개변수

쿼리 매개변수는 특정 매개변수를 전달하기 위해 URL에 ?key=value를 추가하는 것을 의미합니다. 쿼리 매개변수를 전달하는 방법은 비교적 간단하며, $route 객체를 통해 매개변수 값을 얻고 업데이트할 수 있습니다.

코드 예시:

// 获取参数值
this.$route.query.key

// 更新参数值
this.$router.push({
  path: '/test',
  query: {
    key: 'value'
  }
})

요약

이 글에서는 주로 Vue Router의 기본 개념, 라우팅 점프의 세 가지 방법, 매개변수 전달의 두 가지 방법을 소개합니다. 실제 적용에서는 다양한 방법을 사용하여 다양한 필요에 따라 라우팅을 제어하고 관리할 수 있습니다. 이 기사의 소개가 모든 사람이 Vue Router 사용 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다.

위 내용은 Vue Router에서 점프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!