vue에서 동일한 페이지로 이동하고 매개변수를 전환하는 방법

Vue.js는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크입니다. MVVM 모델을 채택하고 데이터 기반 방식으로 DOM과 데이터를 바인딩합니다. 애플리케이션 개발 과정에서 프런트엔드 라우팅은 매우 중요한 부분입니다. Vue.js는 프런트 엔드 라우팅 기능을 구현하는 데 사용할 수 있는 vue-router 플러그인을 제공합니다.

실제 비즈니스에서는 동일한 페이지로 이동하여 매개변수를 전환해야 하는 시나리오를 자주 접하게 됩니다. 예를 들어 사용자가 제품 세부정보 페이지를 탐색할 때 동일한 페이지에서 다른 제품으로 전환해야 합니다. 이때 vue-router의 "동적 라우팅 매칭"과 "지연 로딩" 기능을 사용하여 이를 달성할 수 있습니다.

1. 동적 경로 일치

Vue.js의 라우팅 시스템을 사용하면 매개변수로 URL을 정의하고 라우팅이 일치할 때 매개변수를 구성요소에 삽입할 수 있습니다.

먼저 router.js에서 동적 경로를 정의합니다.

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

위 코드에서는 "Goods"라는 경로를 정의하고 경로는 "/goods/:id"입니다. 그 중 ":id"는 동적 매개변수라는 뜻으로, 사용자가 접속 시 어떤 매개변수 값이든 전달할 수 있다는 뜻이다.

다음으로 Goods.vue 컴포넌트의 $route를 통해 라우팅 매개변수를 가져옵니다.

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

위 코드에서는 $route.params를 통해 라우팅 매개변수를 가져온 다음 제품 전환 시 현재 매개변수 값을 변경합니다. 1, $router.push 메소드를 통해 "Goods"라는 경로로 점프하고 매개변수를 전달합니다. 이를 통해 동일한 페이지에서 서로 다른 제품 간 전환 기능을 사용할 수 있습니다.

2. 지연 로딩

지연 로딩은 필요할 때만 해당 코드를 로딩한다는 의미로 이해될 수 있습니다. 지연 로딩을 사용하면 페이지 로딩 속도와 전반적인 성능이 향상될 수 있습니다.

Vue.js에서는 import() 함수를 사용하여 지연 로딩을 구현할 수 있습니다. 지연 로딩을 사용하려면 router.js의 구성 요소에 대한 참조를 변경하세요.

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

여기서 import('@/views/Goods.vue')는 지연 로딩을 통해 Goods.vue 구성 요소를 소개하는 것입니다. 사용자가 이 경로에 액세스하면 해당 코드가 로드됩니다.

3. 전체 코드

마지막으로 전체 코드를 살펴보겠습니다.

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'Goods',
      component: () => import('@/views/Goods.vue')
    }
  ]
})

Goods.vue

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

위 코드에서는 동적 경로 일치 및 지연 로딩 기술을 사용합니다. 같은 페이지에서 다른 상품 간 전환 기능을 구현했습니다. Vue.js의 라우팅 시스템을 적용한 시나리오입니다. Vue.js를 이제 막 배우기 시작한 학생들에게는 학습하고 마스터할 가치가 매우 높습니다.

위 내용은 vue에서 동일한 페이지로 이동하고 매개변수를 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!