Vue2.0 Vue-Routerの使い方と注意点-Vue.js-php.cn

Vue2.0 Vue-Routerの使い方と注意点

WBOY

リリース： 2023-06-09 16:11:14

オリジナル

1587 人が閲覧しました

Vue-Router は、Vue.js が公式に推奨するルーティング管理ライブラリであり、Vue.js 2.0 バージョンで完全にアップグレードおよび最適化され、より使いやすく、より効率的になりました。 Vue-Router は非常に便利ですが、使用する際に注意しなければならない点もいくつかあります。この記事では、開発者が Vue-Router をより良く活用できるように、Vue-Router の使い方と注意点を紹介します。

1. Vue-Router の基本的な使い方

Vue-Router は Vue.js をベースにしたプラグインであり、使用前にインストールして導入する必要があります。 npm を使用して Vue-Router を直接インストールできます:

npm install vue-router

ログイン後にコピー

インストールが完了したら、Vue-Router を Vue アプリケーションに導入します:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

ログイン後にコピー

Vue.use(VueRouter) はグローバルを登録します。ルーターインスタンス。

Vue インスタンスでルーターを構成します:

import Home from './views/Home.vue'
import About from './views/About.vue'

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

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

ログイン後にコピー

VueRouter は本質的に Vue のインスタンスオブジェクトであり、Vue ルーティングを管理するために使用されます。上記のコードでは、VueRouter インスタンスを作成し、ルーティング構成配列 (ルート) を渡しました。ルーティング構成配列には、アプリケーションのさまざまなルートに対応するコンポーネントが含まれています。

router-link と router-view をテンプレートに追加します:

<div id="app">
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</div>

ログイン後にコピー

VueRouter では、ルートをジャンプするときに router-link コンポーネントを使用する必要があり、router-view を使用する必要があります。コンポーネントを使用して、現在のルーティングコンポーネントを表示します。

2. 動的ルーティングとネストされたルーティング

Vue-Router は、さまざまなニーズに応じて構成できる動的ルーティングとネストされたルーティングをサポートしています。

1. 動的ルーティング

動的ルーティングとは、ルーティング時の変数に基づくルーティングマッチングを指します。例:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

ログイン後にコピー

この例では、/:id はマッチングパラメーターを表します。 /user/1、/user/2 などの異なるルートに一致し、一致するコンポーネントにパラメータを渡します。

2. ネストされたルーティング

ネストされたルーティングとは、ルート内にルートを埋め込むことを指します。例:

const router = new VueRouter({
  routes: [
    { path: '/user', component: User,
      children: [
        { path: '', component: UserHome },
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

ログイン後にコピー

この例では、children オプションを使用してネストされたルーティングを定義します。ルーティング構造では、サブルートの定義は親ルートの定義と似ていますが、サブルートのパスは親ルートのパスの後に追加する必要があります。

3. ルーティングフック関数

Vue-Router は、ジャンプのルーティング時にいくつかの操作を実行できるいくつかのルーティングフック関数を提供します。

1.beforeEach

ルーティングジャンプ前に実行されるフック関数で、権限制御やジャンプインターセプトなどに使用できます。

router.beforeEach((to, from, next) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
  // 如果需要跳转，必须调用next()。
  next()
})

ログイン後にコピー

2.afterEach

ルートジャンプ後に実行されるフック関数は、ルートジャンプ後の操作に使用できます。

router.afterEach((to, from) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
})

ログイン後にコピー

4. 注意事項

1. ルーティングするときは、router-link コンポーネントを使用する必要があります。a タグは使用しないでください。

2. ルーティングジャンプ時にパラメータを渡す必要がある場合は、ルーティングパラメータまたはクエリパラメータを使用できます。ルーティングパラメータに対応する変数名は、ルーティング定義でコロン (:) を使用して定義する必要があります。

3. ジャンプするときに、ルートオブジェクトのメタ属性にメタデータを設定でき、これをルーティングフック関数で使用できます。

4. HTML5 履歴モードを使用する場合は、サーバー側でルートを設定して一致させる必要があります。構成されていない場合、更新時に 404 エラーページが返されます。

5. 概要

Vue-Router は、Vue.js アプリケーションのルーティングを簡単に管理および制御できる Vue.js の重要なプラグインです。この記事では、Vue-Router の基本的な使い方と注意点を紹介し、Vue-Router の使い方と応用をよりよくマスターしていただければ幸いです。

以上がVue2.0 Vue-Routerの使い方と注意点の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。