Vue.js는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크입니다. MVVM 모델을 채택하고 데이터 기반 방식으로 DOM과 데이터를 바인딩합니다. 애플리케이션 개발 과정에서 프런트엔드 라우팅은 매우 중요한 부분입니다. Vue.js는 프런트 엔드 라우팅 기능을 구현하는 데 사용할 수 있는 vue-router 플러그인을 제공합니다.
실제 비즈니스에서는 동일한 페이지로 이동하여 매개변수를 전환해야 하는 시나리오를 자주 접하게 됩니다. 예를 들어 사용자가 제품 세부정보 페이지를 탐색할 때 동일한 페이지에서 다른 제품으로 전환해야 합니다. 이때 vue-router의 "동적 라우팅 매칭"과 "지연 로딩" 기능을 사용하여 이를 달성할 수 있습니다.
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"라는 경로로 점프하고 매개변수를 전달합니다. 이를 통해 동일한 페이지에서 서로 다른 제품 간 전환 기능을 사용할 수 있습니다.
지연 로딩은 필요할 때만 해당 코드를 로딩한다는 의미로 이해될 수 있습니다. 지연 로딩을 사용하면 페이지 로딩 속도와 전반적인 성능이 향상될 수 있습니다.
Vue.js에서는 import() 함수를 사용하여 지연 로딩을 구현할 수 있습니다. 지연 로딩을 사용하려면 router.js의 구성 요소에 대한 참조를 변경하세요.
{ path: '/goods/:id', name: 'Goods', component: () => import('@/views/Goods.vue') }
여기서 import('@/views/Goods.vue')는 지연 로딩을 통해 Goods.vue 구성 요소를 소개하는 것입니다. 사용자가 이 경로에 액세스하면 해당 코드가 로드됩니다.
마지막으로 전체 코드를 살펴보겠습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!