vue のページジャンプでは何が起こっているのでしょうか?

Vue は、シングルページ アプリケーション (SPA) の構築に一般的に使用される最新の JavaScript フレームワークです。 SPA を使用すると、ユーザーはページ全体をリロードすることなく、さまざまなページやページ コンポーネントに移動できます。 Vue では、ページ ジャンプは主にルーティングを通じて実装されます。

ルーティングは、URI をコンポーネントにマップするメカニズムです。 URI は、「https://example.com/user/123」などの URL の一部です。 URI の /user/123 部分はルーティング パスと呼ばれます。 Vue では、ルーティングは Vue Router を通じて実装されます。

Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue Router を使用すると、ルートを定義し、ルーティング パスを Vue コンポーネントにマップできます。 Vue Router はルート ナビゲーション機能も提供しており、ユーザーはページ全体をリロードすることなく、別のページやページ コンポーネントに移動できます。ルート ナビゲーションは、リンク ( など) またはプログラム (this.$router.push('/') など) を通じて実装できます。

Vue Router の基本的な使用方法は次のとおりです。

1. Vue Router のインストール

npm install vue-router

2. ルートの作成

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

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

上記のコードでは、「home」と「about」の 2 つのルートを作成し、それぞれ Home コンポーネントと About コンポーネントにマッピングします。ルーティング パスはそれぞれ「/」と「/about」です。

3. Vue コンポーネントでのルーティングの使用

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

    <router-view></router-view>
  </div>
</template>

上記のコードでは、<router-link> コンポーネントを使用してルーティング リンクを作成します。を選択し、<router-view> コンポーネントを使用して、現在のルートに一致するコンポーネントをレンダリングします。

4. 別のルートに移動する

<template>
  <div>
    <button @click="goToHome">Go to Home</button>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

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

上記のコードでは、プログラムによって別のルートに移動します。 this.$router.push() メソッドを使用して、現在のルーティング パスを新しいパスに変更します。

つまり、Vue Router は柔軟で使いやすいルーティング メカニズムを提供します。ルートを定義し、ルート パスを Vue コンポーネントにマッピングすることで、単一ページのアプリケーションを作成し、ユーザーがページ全体をリロードすることなく、別のページやページ コンポーネントに移動できるようになります。

以上がvue のページジャンプでは何が起こっているのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。