パラメータを含む uniapp サブコンポーネントのジャンプ ページ

Uniapp は、クロスプラットフォーム開発フレームワークとして、非常に便利なコンポーネントベースの開発方法を提供します。これにより、ページを小さく簡潔なサブコンポーネントに分割できるため、コードの保守性とスケーラビリティが向上します。ただし、実際の開発では、サブコンポーネントでページジャンプを実行したり、パラメータを渡したりする必要がある状況に遭遇するため、Uniapp のルーティングとパラメータ受け渡しのメカニズムをある程度理解する必要があります。

1. Uniapp ルーティング

Uniapp のルーティング メカニズムは vue-router を使用するため、Vue.js のネイティブ ルーティング定義と API をサポートします。ルーティングがフロントエンド アプリケーションのページ間のジャンプに関与していることはわかっています。Uniapp は 2 つのルーティング モードを提供します:

1. H5 モード: ルーティングは URL を介してジャンプし、最下層は履歴 API を使用します。
2. APP モード: ルーティングはネイティブ APP フレームワークを介してジャンプし、最下層はネイティブ API を使用します。

Uniapp でのルートの定義方法は Vue.js と同様で、router フォルダー配下の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. 宣言型ナビゲーション: テンプレートの router-link タグを使用して他のページにジャンプします。

<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 などの属性によって完了します。 、小道具。ただし、注意すべき点が 1 つあります。uniapp でルーティングする場合は、params を使用してパラメーターを渡すことをお勧めします。通常、クエリは URL でパラメータを渡すために使用され、ネイティブ APP はページの回復も処理する必要があるため、params を使用することをお勧めします。

1. router-link タグを介してパラメータを渡す

<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 と name の 2 つのパラメータが定義されており、コンポーネントの this.$route.params を通じてパラメータを取得できます。

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

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

4. 概要

上記の内容を通じて、Uniapp のページにジャンプしてサブコンポーネントにパラメーターを渡す方法を学びました。実際の開発では、特定のビジネス ニーズに応じて、パラメーターのジャンプと受け渡しにどの方法を使用するかを選択できます。いずれにせよ、コードの保守と拡張を容易にするために、適切なコーディング スタイルと仕様を維持することに注意を払う必要があります。

以上がパラメータを含む uniapp サブコンポーネントのジャンプ ページの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。