ルーティングを使用して Vue でページジャンプと切り替えを実現する方法

ルーティングを使用して Vue でページをジャンプしたり切り替えたりするのは非常に簡単です。 Vue Router は Vue.js の公式ルーティング マネージャーであり、Vue アプリケーションでのページ切り替えとナビゲーションの実装に役立ちます。この記事では、具体的なコード例を使用して、Vue Router を使用してページのジャンプと切り替えを実現する方法を紹介します。

まず、Vue Router をインストールする必要があります。 Vue Router は、npm または Yarn を通じてインストールできます。

npm install vue-router

または

yarn add vue-router

インストールが完了したら、Vue Router を使用する必要がある場所に導入します。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

次に、VueRouter インスタンスを作成し、ルーティングを構成する必要があります。別のファイルにルーティング構成を作成し、このルーティング構成をメイン ファイルにインポートして使用できます。

// router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ],
  mode: 'history' // 可选，使用history模式可以去掉URL中的#
})

export default router

上記のコードでは、3 つのルートを定義します。「/」は Home コンポーネントに対応し、「/about」は About コンポーネントに対応し、「/contact」は Contact コンポーネントに対応します。さらに、モード オプションを使用してルーティング モードを設定することもできます。デフォルトはハッシュ モードです。URL の # を削除するには履歴モードを使用します。

次に、このルーティング設定をメイン ファイルに導入して使用します。

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router, // 将路由配置注入Vue实例
  render: h => h(App)
}).$mount('#app')

上記のコードでは、アプリケーション全体でルーティング機能を使用できるように、ルーティング設定を Vue インスタンスに挿入します。

次に、コンポーネント内の タグを使用して、ページにジャンプします。

<!-- Home.vue -->

<template>
  <div>
    <h1 id="Home">Home</h1>
    <router-link to="/about">Go to About</router-link>
    <router-link to="/contact">Go to Contact</router-link>
  </div>
</template>

上記のコードでは、 タグを使用してリンクを作成し、to 属性でジャンプ先のパスを指定します。

最後に、コンポーネント内で タグを使用して、現在のルートに対応するコンポーネントを表示できます。

<!-- App.vue -->

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

上記のコードでは、 タグは、現在のルートに基づいて、対応するコンポーネントを動的に表示します。

これまでに、Vue でページのジャンプと切り替えを実現するためのルーティングの使用が完了しました。アプリケーションを実行すると、 タグをクリックすると、ページが対応するコンポーネントに自動的にジャンプし、それが タグに表示されることがわかります。

上記は、Vue Router を使用してページのジャンプと切り替えを実現する基本的なプロセスです。 Vue Router を導入し、ルーティングを設定し、 タグと タグを使用することで、ページのジャンプと切り替えを迅速かつ簡単に実装できます。この記事があなたの学習と発展に役立つことを願っています。

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