皆さんこんにちは！
今回は初心者さんに必見！パンくずリストの作り方をお教えします！！
HTML、CSSではなくコンポーネントを利用して作成していきます。
パンくずリストはSEO内部対策にも非常に有効で、コンポーネントを使うことでその都度HTML、CSSを記述しなくて済むのでぜひご利用ください！
また、今回の記事を書くにあたって、下記の記事を参考にさせて頂きました。
ご協力誠にありがとうございます。
それでは、順を追って一緒に説明を見ていきましょう！
#コンポーネントの作成#
componentsディレクトリにBreadcrumb.vueを作成し、以下のテンプレートを作成します。
<template>
<div class="l-breadcrumb">
<div class="l-breadcrumb__inner">
<ul class="l-breadcrumb__items">
<li class="l-breadcrumb__item" v-for="breadcrumb in breadcrumbs.data" :key="breadcrumb.name">
<a v-if="breadcrumb.path" :href="breadcrumb.path" class="l-breadcrumb__text">
{{ breadcrumb.name }}
<b-icon pack="fas" icon="chevron-right" class="bread-icon"></b-icon>
</a>
<span v-else class="l-breadcrumb__text">{{ breadcrumb.name }}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
props: ['breadcrumbs']
}
</script>
<style scoped>
.l-breadcrumb__items li {
display: inline-block;
margin-top: 1rem;
}
.l-breadcrumb__items a {
color: var(--link-color) !important;
}
.l-breadcrumb__items a:hover {
text-decoration: underline !important;
}
.l-breadcrumb__items .bread-icon {
margin: 0 5px;
color: black;
opacity: 0.5;
display: inline;
}
</style>
<b-icon>はCSSフレームワークBuefyを使うことで、実装できます。詳しくは、僕が書いたこちらの記事を見て下さい。
初心者必見！サイト制作は楽してなんぼ。CSSフレームワークBuefyの紹介！！
効率的にサイト作り！Buefyでアイコンを表示しよう！！
また、パンくずリストのCSSも載せておくので、ぜひ使ってください！
#コンポーネントの読み込み#
コンポーネントを読み込み、propsでnameとpathと言う名のプロパティを用いて、オブジェクト作成します。
<breadcrumb :breadcrumbs="breadcrumbs" />
<script>
import Breadcrumb from '~/components/Breadcrumb.vue'
export default {
computed: {
breadcrumbs: function() {
return {
data: [
{
name: 'ホーム',
path: '/'
},
{
name: 'ユーザー情報',
path: '/user'
},
{
name: 'アカウント情報'
}
]
}
}
}
}
</script>
すると、以下のような結果になります。
いかがだったでしょうか？
パンくずリストはUXの部分でも非常に有効なので、僕は使えるなら使った方がいいかなと思います。
今使わなくても、いずれは使うときが必ず来るので、その時は今回書いた記事をぜひ参考にして使ってください！！
以上、「9割以上が知らない！？初心者におススメ！Vue.jsでパンくずリストを作ろう！！」でした！
良ければ、LGTM、コメントお願いします。
また、何か間違っていることがあればご指摘頂けると幸いです。
他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！
Thank you for reading