ホームページ > ウェブフロントエンド > Vue.js > ルーティングを使用して Vue のページ間のメッセージ受け渡しを実装するにはどうすればよいですか?

ルーティングを使用して Vue のページ間のメッセージ受け渡しを実装するにはどうすればよいですか?

王林
リリース: 2023-07-22 10:54:28
オリジナル
1832 人が閲覧しました

ルーティングを使用して Vue のページ間のメッセージ受け渡しを実装するにはどうすればよいですか?

Vue 開発では、異なるページ間のメッセージングが一般的な要件です。 Vue ルーティングは、ページ間のメッセージ受け渡しを実装する便利な方法を提供します。この記事では、Vue のルーティングを使用してページ間のメッセージ パッシングを実装する方法を紹介し、詳細なコード例を示します。

1. ルーティングの構成
最初に、ルーティングを構成する必要があります。 Vue プロジェクトでは、ルーティング管理に vue-router プラグインを使用できます。 npm経由でvue-routerをインストールし、main.jsに導入して利用します。プロジェクトに Home と About の 2 つのページがあるとします。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

// main.js

 

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from './components/Home.vue'

import About from './components/About.vue'

 

Vue.use(VueRouter)

 

const routes = [

  { path: '/', component: Home },

  { path: '/about', component: About },

]

 

const router = new VueRouter({

  routes

})

 

new Vue({

  router,

  render: h => h(App)

}).$mount('#app')

ログイン後にコピー

上記のコードでは、Home と About の 2 つのコンポーネントに対応する 2 つのルーティング ルールを定義しました。次に、コンポーネント内の $route オブジェクトを使用してルーティング情報を取得し、this.$router.push() メソッドを使用してページにジャンプします。

2. ページ ジャンプ
Vue コンポーネントでは、this.$router.push() メソッドを通じてページにジャンプできます。ルーティング パラメータとして渡す必要があるメッセージをターゲット ページに渡すことができます。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

// Home.vue

 

<template>

  <div>

    <h1>{{ message }}</h1>

    <button @click="gotoAbout">Go to About</button>

  </div>

</template>

 

<script>

export default {

  data() {

    return {

      message: 'Hello',

    }

  },

  methods: {

    gotoAbout() {

      this.$router.push({

        path: '/about',

        query: {

          message: this.message,

        },

      })

    },

  },

}

</script>

ログイン後にコピー

上記のコードでは、Home コンポーネントにメッセージ メッセージを定義し、About ページにジャンプするボタンを提供します。 this.$router.push() メソッドを通じて、メッセージをクエリ パラメーターとして About ページに渡します。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

// About.vue

 

<template>

  <div>

    <h1>{{ message }}</h1>

    <button @click="goBack">Go Back</button>

  </div>

</template>

 

<script>

export default {

  data() {

    return {

      message: '',

    }

  },

  mounted() {

    this.message = this.$route.query.message

  },

  methods: {

    goBack() {

      this.$router.push('/')

    },

  },

}

</script>

ログイン後にコピー

About コンポーネントでは、this.$route.query.message を使用して、ホームページから渡されたメッセージを取得し、ページに表示します。同時に、クリック後にホームページに戻ることができるボタンも提供します。

3. 概要
Vue のルーティング機能を使用すると、ページ間のメッセージ転送を簡単に実装できます。ページがジャンプすると、メッセージをルーティング パラメーターとしてターゲット ページに渡すことができ、渡されたメッセージはターゲット ページの this.$route オブジェクトを通じて取得できます。

この記事では、簡単な例を使用して、Vue のルーティングを使用してページ間のメッセージ パッシングを実装する方法を紹介します。実際の開発では、特定のニーズに基づいて、より高度なルーティング機能を使用してニーズを満たすことができます。

以上がルーティングを使用して Vue のページ間のメッセージ受け渡しを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート