昨天看完了Router，今天來寫個跟它有密切關係的常見網站功能：「Breadcrumb麵包屑」！
記得Components那篇嗎？重複使用的結構可以寫成Component，在需要時將它引用進來！現在就很適合把Breadcrumb寫成Component，忘記怎麼寫的話可以回頭看一下( https://ithelp.ithome.com.tw/articles/10202766 )，現在我們就開始吧！

Component Breadcrumb範例實做

我直接用<ul><li>寫了一組Breadcrumb要用的結構，接著寫入以下內容：

<template>
    <div class="breadcrumb">
        <ul>
            <li
            v-for="(breadcrumb, idx) in breadcrumbList"
            :key="idx"
            @click="routeTo(idx)"
            :class="{'linked': !!breadcrumb.link}">

            {{ breadcrumb.name }}

            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Breadcrumb',
        data() {
            return {
                breadcrumbList: []
            }
        },
        mounted () { this.updateList() },
        watch: { '$route' () { this.updateList() } },
        methods: {
        routeTo (pRouteTo) {
            if (this.breadcrumbList[pRouteTo].link) this.$router.push(this.breadcrumbList[pRouteTo].link)
        },
        updateList () { this.breadcrumbList = this.$route.meta.breadcrumb }
        }
    }
</script>

<style scoped>
    .breadcrumb {
        margin-bottom: line(3);
    }
    ul {
        display: flex;
        list-style: none;
        padding: 0;
        font-size: font(1);
    }
    li {
        cursor: pointer;
        color: #42b983;
    }
    li:last-child {
        cursor: default;
    }
    li:not(:last-child):after {
        content: ">";
        margin: 5px;
    }
</style>

Component Breadcrumb範例解說

先從<script>開始看，相信經過前幾天的學習，你可能也猜到會用到v-for陣列了，沒錯！

• 我先return了breadcrumbList陣列，裡面是空的。
• mounted ()是vue的「生命週期鉤子」目前不了解沒關系，之後會來特別寫一篇，目前先了解它是vue網站在創建的初始化過程中的一個階段鉤子，「生命週期鉤子」函式能你在指定階段加入自己的程式，而mounted是在「模板掛載完成」的階段。
• this.updateList()函式加入上述「生命週期鉤子」。
• watch:可讓我們監看指定值，當這個值變更時，就去做我們指定的事情，接著在通過$router訪問路由實例。
• methods:執行動作，什麼動做？簡單說它能依據我們router.js裡的routes:內容更新Breadcrumb。
  整體來說就是在mounted時監看route，如有更新就連動更新Breadcrumb內容、連結。

Page範例實做

做完了Component當然就要把它引用進App.vue頁面裡了！為了讓範例清處一點，我另外新增了一頁子頁取名News，並在主選單nav新增頁面連結：就像昨天學的做法一樣，實做如下：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">回首頁</router-link> |
      <router-link to="/news">最新消息</router-link> |
      <router-link to="/about">關於我們</router-link>
    </div>
    <Breadcrumb />
    <router-view/>
  </div>
</template>

<script>
import Breadcrumb from './components/Breadcrumb'

export default {
  name: 'about',
  components: {
    Breadcrumb
  }
}
</script>

<style scoped>
  #nav {
    background: #42b983;
    padding: 20px;
    text-align: center;
    color: white;
  }
  a {
    color: white;
    text-decoration: none;
  }
</style>

Router範例

剩下最後一個步驟了！換到router.js，並寫下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        breadcrumb: [{
          name: '首頁'
        }]
      }
    },
    {
      path: '/news',
      name: 'news',
      component: () => import('./views/News.vue'),
      meta: {
        breadcrumb: [{
          name: '首頁',
          link: 'home'
        },
        {
          name: '最新消息'
        }]
      }
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue'),
      meta: {
        breadcrumb: [{
          name: '首頁',
          link: 'home'
        },
        {
          name: '關於我'
        }]
      }
    }
  ]
})

Router範例解說

我在routes:陣列中，加入各頁的meta:，裡面設定了breadcrumb，並寫成了一個陣列，該陣列就是breadcrumb一層一層向內的連結選單，以下我做詳細說明：

• name:是這一頁連結按鈕要在頁面上顯示的名稱文字。
• link:是點下breadcrumb連結選項時，要連去的頁面，比如說首頁就連去home(也就是routes裡頁面的名子name)。
  剛剛說breadcrumb:陣列就是該頁的breadcrumb層一層向內的選單，那為什麼最後一筆只下name:連結顯示名稱，沒下link:呢？因為最後一筆就是你的當前頁面了，不需要自已連自已。

目前範例只有兩層而已，也許不是那麼清處，我另外把news頁改寫成三層，會更容易了解喔：

    {
      path: '/news',
      name: 'news',
      component: () => import('./views/News.vue'),
      meta: {
         breadcrumb: [{
           name: '首頁',
           link: 'index'
         },
         {
           name: '範例層test',
           link: 'test'
         },
         {
           name: '關於我'
         }]
      }
    },

這樣就能明白它的做法了吧，實做成功！breadcrumb是不是也不難？