매개변수가 있는 uniapp 하위 구성요소 점프 페이지

Uniapp은 크로스 플랫폼 개발 프레임워크로서 매우 편리한 컴포넌트 기반 개발 방법을 제공하므로 페이지를 작고 간결한 하위 컴포넌트로 분할할 수 있어 코드의 유지 관리성과 확장성이 향상됩니다. 그러나 실제 개발에서는 하위 구성 요소에서 페이지 점프를 수행하고 매개 변수를 전달해야 하는 상황에 직면하게 됩니다. 이를 위해서는 Uniapp의 라우팅 및 매개 변수 전달 메커니즘에 대한 어느 정도 이해가 필요합니다.

1. Uniapp 라우팅

Uniapp의 라우팅 메커니즘은 vue-router를 사용하므로 Vue.js의 기본 라우팅 정의 및 API를 지원합니다. 우리는 라우팅이 프런트엔드 애플리케이션에서 페이지 간 이동을 담당한다는 것을 알고 있습니다. Uniapp은 두 가지 라우팅 모드를 제공합니다:

1. H5 모드: 라우팅은 URL을 통해 점프하고, 하단 레이어는 히스토리 API를 사용합니다.
2. APP 모드: 라우팅은 기본 APP 프레임워크를 통해 점프하고 하단 레이어는 기본 API를 사용합니다.

Uniapp에서 경로를 정의하는 방법은 Vue.js와 동일합니다. 라우터 폴더 아래 index.js에서 경로를 정의합니다. 간단한 예를 들어 설명하겠습니다.

//router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

위 코드는 루트 디렉터리가 HelloWorld 구성 요소를 가리키도록 라우팅 규칙을 정의합니다. 이 구성 요소는 프로젝트의 루트 경로에 액세스할 때 페이지에 렌더링됩니다. 실제 개발에서는 특정 비즈니스 요구 사항에 따라 라우팅 규칙을 정의해야 합니다.

2. 페이지 점프

1. 선언적 탐색: 템플릿의 라우터 링크 태그를 사용하여 다른 페이지로 이동합니다.

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

2. 프로그래밍 방식 탐색: $router.push 또는 $router.replace 메소드를 통해 다른 페이지로 이동합니다.

<template>
  <div>
    <button @click="gotoAbout()">去About页面</button>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  },
  methods:{
    gotoAbout(){
      this.$router.push("/About")
    }
  }
}
</script>

3. 페이지 매개변수 전달

uniapp에서 페이지 매개변수 전달은 Vue.js와 동일하며 실제로는 query, params, meta, props 등의 속성을 통해 완성됩니다. 다만, 한 가지 주의할 점은 uniapp에서 라우팅할 때 params를 사용하여 매개변수를 전달하는 것이 좋습니다. 쿼리는 일반적으로 URL의 매개변수를 전달하는 데 사용되며 기본 APP도 페이지 복구를 처리해야 하므로 매개변수를 사용하는 것이 좋습니다.

1. 라우터 링크 태그를 통해 매개변수 전달

<template>
  <div>
    <router-link :to="{name: 'About', params: {id: 1, name: '张三'}}">About</router-link>
  </div>
</template>

2. 프로그래밍 방식 탐색을 통해 매개변수 전달

<template>
  <div>
    <button @click="gotoAbout()">去About页面</button>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  },
  methods:{
    gotoAbout(){
      this.$router.push({name: 'About', params: {id: 1, name: '张三'}})
    }
  }
}
</script>

3. 라우팅 규칙에서 라우팅 매개변수 정의

//router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/About/:id/:name',
      name: 'About',
      component: About
    }
  ]
})

라우팅 규칙에서 두 개의 매개변수 ID와 이름을 정의하면 얻을 수 있습니다. 구성 요소의 this.$route.params를 통해 매개변수를 지정합니다.

<template>
  <div>
    <h1 id="这是About页面">这是About页面</h1>
    <h2 id="this-route-params-id">{{this.$route.params.id}}</h2>
    <h2 id="this-route-params-name">{{this.$route.params.name}}</h2>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  }
}
</script>

4. 요약

위 내용을 통해 유니앱에서 페이지로 이동하는 방법과 하위 컴포넌트에 파라미터를 전달하는 방법을 알아보았습니다. 실제 개발에서는 특정 비즈니스 요구에 따라 매개변수를 점프하고 전달하는 데 사용할 방법을 선택할 수 있습니다. 어느 쪽이든, 코드를 쉽게 유지하고 확장할 수 있도록 좋은 코딩 스타일과 사양을 유지하는 데 주의를 기울여야 합니다.

위 내용은 매개변수가 있는 uniapp 하위 구성요소 점프 페이지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!