ホームページ > ウェブフロントエンド > フロントエンドQ&A > vue のページジャンプでは何が起こっているのでしょうか?

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

PHPz
リリース: 2023-05-25 10:19:08
オリジナル
759 人が閲覧しました

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
ログイン後にコピー
  1. ルートの作成
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」です。

  1. 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> コンポーネントを使用して、現在のルートに一致するコンポーネントをレンダリングします。

  1. 別のルートに移動する
<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 サイトの他の関連記事を参照してください。

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