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

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

王林

リリース： 2023-06-27 08:21:22

オリジナル

2133 人が閲覧しました

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

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

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

vue-router のインストール

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

npm install vue-router

ログイン後にコピー

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 インスタンスに配置されます。

ルーティング設定

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

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

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

ログイン後にコピー

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

ルートジャンプ

ルーティング設定では、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 を使用してフロントエンドのルーティングジャンプを実装する方法を見てみましょう。

Vue-Router のインストール

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

npm install vue-router --save

ログイン後にコピー

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

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 を使用することを意味します。

ルーティングの登録

ルーティングインスタンスを作成した後、ルーティングインスタンスを 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 を渡す必要があります。

ルートジャンプ

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 サイトの他の関連記事を参照してください。