ルーティングを使用して Vue でページ ジャンプを実装するにはどうすればよいですか?

ルーティングを使用して Vue でページジャンプを実現するにはどうすればよいですか?

フロントエンド開発テクノロジーの継続的な開発により、Vue.js は最も人気のあるフロントエンド フレームワークの 1 つになりました。 Vue 開発において、ページジャンプは重要な部分です。 Vue はアプリケーションのルーティングを管理するための Vue Router を提供しており、ルーティングを通じてページ間のシームレスな切り替えを実現できます。この記事では、ルーティングを使用して Vue でページ ジャンプを実装する方法をコード例とともに紹介します。

まず、Vue プロジェクトに vue-router プラグインをインストールします。次のコマンドでインストールできます:

npm install vue-router

インストールが完了したら、main.js ファイルに vue-router を導入して使用します:

import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ el: '#app', router, render: h => h(App) })

routing でルーティングを構成します。 file:

import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] })

この例では、ホームページ (/) とアバウト ページ (/about) の 2 つのルートを構成しました。 Home と About はそれぞれ 2 つのコンポーネントであり、views フォルダーの下に作成する必要があります。

App.vue にルーティング アウトレットを追加します:

これで、基本的なルーティング構成が完了しました。次に、コンポーネント内でルーティングを使用してページ ジャンプを実装できます。

ページにジャンプする必要があるコンポーネントでは、タグを使用してジャンプ リンクを生成できます。たとえば、Home.vue コンポーネントに About ページへのリンクを追加できます:

About.vue コンポーネントに Home ページへのリンクを追加することもできます:

タグによって生成されたパス リンクは、自動的にタグに変換されます。

methods: { goToAbout() { this.$router.push('/about') } }