Vue2 パッケージのブレッドクラム コンポーネント
ブレッドクラムは一般的なナビゲーション コンポーネントであり、通常は現在のページの位置を表示するために使用され、ユーザーがいつでも自分の位置を知ることができるようにします。この記事では、Vue2を使ってパンくずコンポーネントをラップする方法を紹介します。
1. ブレッドクラムコンポーネントを作成する
まず、ブレッドクラム機能を実装するための Vue コンポーネントを作成する必要があります。routesこのコンポーネントでは、配列をパラメータとして受け取り、ルーティング情報に基づいてパンくずリストを生成する必要があります。
ビュー
コピー
<template>
<div class="breadcrumb">
<ul>
<li v-for="(route, index) in routes" :key="route.path">
<router-link :to="route.path">{
{ route.meta.title }}</router-link>
<span v-if="index !== routes.length - 1">/</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Breadcrumb',
props: {
routes: {
type: Array,
required: true,
default: () => []
}
}
}
</script>
このコンポーネントでは、routesルーティング情報を受け取るために呼び出される props 属性を使用します。コンポーネントのテンプレートでは、v-forディレクティブを使用してroutes配列を反復処理し、対応するブレッドクラムを生成します。このコンポーネントを使用してrouter-linkルーティング ジャンプを実装し、各パンくずリストの間にスラッシュ区切り文字を追加しました。
2. ブレッドクラムコンポーネントを使用する
ブレッドクラム コンポーネントを作成したら、それを他のコンポーネントで使用できます。たとえば、App.vueコンポーネント内でブレッドクラム コンポーネントを使用して、現在のページがどこにあるかを表示できます。
ビュー
コピー
<template>
<div>
<breadcrumb :routes="routes"></breadcrumb>
<router-view></router-view>
</div>
</template>
<script>
import Breadcrumb from './Breadcrumb.vue'
export default {
name: 'App',
components: {
Breadcrumb
},
computed: {
routes() {
const routes = []
let route = this.$route
while (route) {
routes.unshift(route)
route = route.parent
}
return routes
}
}
}
</script>
この例では、コンポーネント内のプロップをApp.vue使用して、現在のページの位置を計算します。computedまず空の配列を定義しroutes、次にwhileループを使用して現在のルートとその親ルートを走査し、それらをroutes順番に配列に追加します。最後に、routesこの配列を小道具としてブレッドクラム コンポーネントに渡し、対応するブレッドクラムを生成します。
3. まとめ
この記事では、Vue2を使用してパンくずリストコンポーネントをラップする方法を紹介しました。このコンポーネントを通じて、さまざまな複雑なブレッドクラムを簡単に生成して、ユーザーがいつでも自分の位置を知ることができます。同時に、Vue2 を使用して開発することで、アプリケーションをより効率的に構築できるようになります。