Vue折騰記 - (2)寫一個不大靠譜的麵包屑元件

CRPER發表於2017-07-18
Vue元件

前言

這個元件比側邊欄的簡單許多..
那麼這個你能學到什麼,見仁見智哈....

效果圖

我把頁面標題和麵包屑封裝到一起..就不用涉及到元件的通訊了,
不然又要去監聽路由或者依賴狀態去獲取

疑惑解答:

  1. 點選父(也就是摺疊選單)為什麼會跑到子選單第一個

    因為我第一個子路由是空路徑,也就是預設路由

  2. 點選首頁為什麼會跑到客戶管理的第一個

    因為根路由我寫了個重定向

功能點

  • 支援分隔符的傳入,字串格式
  • 標題的同步改動

實現原理

麵包屑的文字不是通過命名路由的name實現(很多問題),
而是放到meta裡面實現一個自定義name
遍歷遍歷遍歷,比對比對比對..剩下的看註釋..並不是很麻煩

程式碼

  • 路由大致的寫法(懶載入)

import pageRouterView from "@/pages/adManage/adManage.vue";
// 廣告管理
const ADADD = resolve => require(["@/pages/adManage/adadd.vue"], resolve);
const ADCHECK = resolve => require(["@/pages/adManage/adcheck.vue"], resolve);

export default [
  {
    path: "ad",
    component: pageRouterView,
    meta: {
      breadcrumbName: "廣告管理"
    },
    children: [
      {
        path: "",
        component: ADADD,
        meta: {
          breadcrumbName: "廣告新增"
        }
      },
      {
        path: "check",
        component: ADCHECK,
        meta: {
          breadcrumbName: "廣告稽核"
        }
      }
    ]
  }
];複製程式碼
  • breadcrumb.vue
<template>
  <div>
    <span class="title">{{title}}</span>
    <ul class="breadcrumb">
      <li v-for="(item,index) in brumblist" :key="index">
        <router-link :to="item.path">{{item.meta.breadcrumbName}}</router-link>
        <span class="separator" v-if="index !== brumblist.length-1">{{separator}}</span>
      </li>
    </ul>
  </div>
</template>

<script>

  export default {
    created () {
      this.getBreadcrumb();
    },
    data () {
      return {
        title: '',  // 頁面標題
        brumblist: '' // 路由集合
      }
    },
    props: ['separator'],
    methods: {
      getBreadcrumb () {
        this.brumblist = this.$route.matched; //待遍歷的路由物件
        this.$route.matched.forEach((item, index) => {
          // 判斷父級路由是否為空字串或者meta是否為首頁,直接複寫路徑到根目錄
          // 後面的就是判斷路由和當前遍歷的專案是否一致,是的話把標題的值給上
          item.meta.breadcrumbName === '首頁' ? item.path = '/' : this.$route.path === item.path ? this.title = item.meta.breadcrumbName : '';
        })
      }
    },
    watch: {
      $route () {
        this.getBreadcrumb();
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    clear: both;
    li {
      float: left;
    }
    a {
      text-decoration: none;
      color: #333;
      &:hover {
        color: #20a0ff;
        text-decoration: underline;
      }
    }
  }

  .separator {
    display: inline-block;
    padding: 0 5px;
  }

  .title {
    display: inline-block;
    font-weight: 700;
    font-size: 20px;
  }

  .breadcrumb {
    float: right;
    padding: 5px;
  }
</style>複製程式碼

總結

看了有所收穫是我的榮幸,看了毫無所獲那我也沒轍了,哇哈哈..

相關文章