uniapp でルーティングジャンプに Vue Router を使用する方法

Uniapp でのルート ジャンプに Vue Router を使用する方法

Uniapp でのルート ジャンプに Vue Router を使用することは非常に一般的な操作です。この記事では詳細を説明します。 uniapp プロジェクトで Vue Router を使用する方法を説明し、具体的なコード例を示します。

1. Vue Router のインストール
Vue Router を使用する前に、まず Vue Router をインストールする必要があります。コマンド ラインを開き、uniapp プロジェクトのルート ディレクトリを入力し、次のコマンドを実行して Vue Router をインストールします:

npm install vue-router

2. ルーティング設定ファイルを作成します
プロジェクトのルート内 ルーティングを構成するディレクトリに router.js という名前のファイルを作成します。具体的なコードは次のとおりです。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/Home'
import About from '@/pages/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

上記のコードでは、まず Vue と Router をインポートし、Vue.use() メソッドを通じて Router を使用することを Vue に伝えました。次に、ホームページと概要ページに対応する 2 つのルートを含むルーティング オブジェクトを定義しました。このうち、pathはルーティングパス、nameはルーティング名、componentはルーティングに対応するコンポーネントを表します。

3. App.vue でルーティングをマウントする
App.vue ファイルでは、作成したルーティング設定ファイルを導入し、uniapp にマウントする必要があります。具体的なコードは次のとおりです。

<template>
  <view class="container">
    <router-view/>
  </view>
</template>

<script>
  import router from '../router'

  export default {
    created() {
      uni.$app.$mount(this.$el) // 挂载路由
    },
    router
  }
</script>

上記のコードでは、まずテンプレート タグにビュー コンポーネント <router-view></router-view> を追加して、さまざまなルートの対応するルートを表示します。ルート、コンポーネント。次に、以前に作成したルーティング設定ファイルが script タグに導入され、router 属性を通じて uniapp にマウントされます。

4. ルート ジャンプ
これで、コンポーネント内の <router-link></router-link> コンポーネントを使用して、ページ ジャンプを実現できます。具体的なコードは次のとおりです。

<template>
  <view>
    <router-link to="/home">跳转到主页</router-link>
    <router-link to="/about">跳转到关于页面</router-link>
  </view>
</template>

<script>
  export default {
    //
  }
</script>

上記のコードでは、<router-link></router-link> コンポーネントを使用して、ホームページと概要ページにそれぞれ対応する 2 つのジャンプ リンクを作成します。 to 属性は、ジャンプ先のパスを指定するために使用されます。

同様に、コンポーネントのメソッドで this.$router.push() メソッドを使用してルーティング ジャンプを実装することもできます。具体的なコードは次のとおりです。

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

上記のコードでは、goHome メソッドと goAbout メソッドで this.$router.push() メソッドを使用して、それぞれホームページと概要ページにジャンプします。パラメータはジャンプ先のパスです。

概要
上記の手順により、Vue Router を使用して uniapp プロジェクトでルーティング ジャンプを実行できるようになります。 <router-link></router-link> コンポーネントまたは this.$router.push() メソッドを通じて、ページ間のジャンプとナビゲーションを簡単に実装できます。この記事が、uniapp でのルーティング ジャンプのための Vue Router の使用を誰もが理解するのに役立つことを願っています。

以上がuniapp でルーティングジャンプに Vue Router を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。