Vue でフロントエンド ルーティング ジャンプを実装するにはどうすればよいですか?

Vue は優れたフロントエンド フレームワークであり、アプリケーション開発では、フロントエンドのルーティング ジャンプは非常に一般的な要件です。 Vue は、ルーティング ジャンプを実装するための豊富な機能を提供します。この記事では、Vue の組み込みルーティングの実装と、サードパーティのルーティング ライブラリ Vue-Router の使用について紹介します。

1. Vue の組み込みルーティング実装メソッド

Vue では、組み込みの vue-router を使用してフロントエンドのルーティング ジャンプを実装できます。

1. vue-router のインストール

npm コマンドを使用して vue-router ライブラリをインストールします:

npm install vue-router

2. Vue Router オブジェクトを作成します

Vue プロジェクトのメイン ファイル (例: main.js) に Vue Router オブジェクトを作成し、それを Vue インスタンスにバインドします。以下に示すように:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  // 路由配置
})
new Vue({
  router
}).$mount('#app')

コードでは、最初に vue-router を導入し、それを Vue インスタンスにバインドしました。次に、Vue Router オブジェクトが作成され、Vue インスタンスに配置されます。

3. ルーティング設定

Vue Router オブジェクトを作成するときは、ルーティングを設定する必要があります。 Vue Router の設定には主に、ルーティング パス、ルーティング コンポーネント、ルーティング エイリアス、その他のパラメーターが含まれます。ルーティング パスは URL のパス部分に対応し、ルーティング コンポーネントはパスの下に表示されるコンポーネントを定義します。

たとえば、ページのルートを作成したい場合、ルートを構成するときに次のように記述できます。

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    }
  ]
})

このうち、ルーティング パスは "/about" であり、対応するコンポーネントは About です。

4. ルート ジャンプ

ルーティング設定では、Vue Router の組み込みのルート ジャンプ機能を使用できます。 Vue Router は、ルート ジャンプを実装するための router-link タグと router.push メソッドを提供します。

1) router-link タグを使用する

router-link タグを HTML テンプレートで使用して、ルーティング リンクを作成できます。 router-link タグは、ルーティング設定に基づいて正しい URL を自動的に生成します。

例:

<router-link to="/about">关于我们</router-link>

[About Us] リンクをクリックすると、設定されたルーティング パス「/about」に対応するコンポーネント ページにジャンプします。

2) router.push メソッドを使用する

router-link タグの使用に加えて、Vue Router はルーティング ジャンプを実装するための router.push メソッドも提供します。

例:

this.$router.push('/about')

Vue コンポーネントでは、this.$router を使用して Vue Router インスタンスを取得し、push メソッドを使用してジャンプを実装できます。このコードは、ルーティング パス「/about」を持つコンポーネント ページにジャンプします。

2. Vue-router

Vue-Router は Vue.js をベースにした公式ルーターです。 Vue.js が正式にリリースしたルーティングマネージャーで、ルーティングのネスト、動的ルーティング、ルートの遅延読み込みなどの強力な機能を提供します。 Vue-Router を使用してフロントエンドのルーティング ジャンプを実装する方法を見てみましょう。

1. Vue-Router のインストール

Vue-Router を使用する前に、Vue-Router をプロジェクトにインストールする必要があります。 npmコマンドを使用してインストールできます。

npm install vue-router --save

2. ルーティング インスタンスの作成

Vue ルートを作成するときは、まず、必要なページ コンポーネント (ネストされたサブコンポーネントを含む) の関連ルーティング情報を設定できます。配列にジャンプされます。

例:

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/user/:id',
        component: User
    }
]

この配列は 3 つのルーティング情報を定義します。最初のルーティング情報はデフォルトのジャンプ ページをホームとして定義し、2 番目のルーティング情報はジャンプ ページをホームとして定義します。 3 番目のルーティング情報は、ジャンプ ページを User として定義し、ルーティング情報は id パラメータを渡す必要があります。

次に、Vue-Router の createRouter メソッドを使用してルーティング インスタンスを作成できます。

例:

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes
})

コードでは、Vue-Router の createRouter メソッドを使用してルーティング インスタンスを作成し、ルーティング履歴管理メソッドとルーティング情報を定義します。このうち、createWebHistory は、ルーティング管理に HTML5 History API を使用することを意味します。

3. ルーティングの登録

ルーティング インスタンスを作成した後、ルーティング インスタンスを Vue アプリケーション インスタンスに登録する必要があります。

例:

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'
createApp(App)
.use(router)
.mount('#app')

コードでは、createApp の use メソッドを使用して、ルーティング インスタンスを Vue アプリケーション インスタンスに登録します。

ルーティング インスタンスの登録に加えて、Vue-Router が提供するルーティング ナビゲーション コンポーネント router-view およびルーティング リンク コンポーネント router-link を介してルーティング ジャンプを実装することもできます。

例:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link :to="{name: 'user', params: {id: userId}}">User</router-link>
<router-view></router-view>

コードでは、router-link タグを使用して 3 つのジャンプ リンクを作成し、router-view タグを使用してルーティング コンポーネントの対応するコンテンツを表示します。 3 番目のリンクは、動的パラメータ ID を渡す必要があります。

4. ルート ジャンプ

Vue-Router は、ルート ジャンプを実装するためのさまざまな方法を提供します。たとえば、次のとおりです。

• ルーター リンクを使用するコンポーネント ;
• Vue コンポーネントで this.$router.push() メソッドを使用します;
• Vue コンポーネントで this.$router.replace() メソッドを使用します;
• 使用中Vue コンポーネントの this.$router.go() メソッド;
• Vue コンポーネントで this.$route.back() メソッドを使用します。

たとえば、Vue コンポーネントの router.push メソッドを使用してルーティング ジャンプを実装します。

import { reactive } from 'vue'
export default {
    setup() {
        const state = reactive({
            userId: ''
        })
        const handleRoute = function() {
            router.push({
                name: 'user',
                params: { id: state.userId }
            })
        }
        return {
            state,
            handleRoute
        }
    }
}

コードでは、reactive を使用して Vue コンポーネントにオブジェクトを作成します。そして、 handleRoute メソッドで、router.push メソッドを使用してルート ジャンプを実装します。このうち、nameフィールドはルーティング情報のrouter-linkまたはname属性に相当し、paramsはルーティングに必要な動的パラメータを含むオブジェクトです。 ＃＃＃＃＃＃結論＃＃＃

Vue-Router は、非常に強力で使いやすいルーティング マネージャーです。 Vue アプリケーションでは、Vue-Router を使用してルート ジャンプとルート ジャンプに必要なパラメータ転送を簡単に実装できます。開発者にとって、これにより、単一ページのアプリケーションを非常に簡単かつ効率的に作成できるようになります。

以上がVue でフロントエンド ルーティング ジャンプを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。