ホームページ > 記事 > ウェブフロントエンド > Vue2.0 Vue-Routerの使い方と注意点
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 サイトの他の関連記事を参照してください。