面包屑导航

package.json

@@ -52,6 +52,7 @@
     "element-ui": "2.7.0",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
+    "highlight.js": "^9.17.1",
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
     "jszip": "3.2.1",

src/main.js

@@ -20,6 +20,7 @@ import './utils/error-log' // error log
 
 import * as filters from './filters' // global filters
 
+import Hightlight from './utils/highlight'
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -28,16 +29,18 @@ import * as filters from './filters' // global filters
  * Currently MockJs will be used in the production environment,
  * please remove it before going online! ! !
  */
-import { mockXHR } from '../mock'
+import {mockXHR} from '../mock'
+
 if (process.env.NODE_ENV === 'production') {
   mockXHR()
 }
 
+
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
   // i18n: (key, value) => i18n.t(key, value)
 })
-
+Vue.use(Hightlight)
 // register global utility filters
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])

src/router/modules/components.js

@@ -100,7 +100,7 @@ const componentsRouter = {
       path: 'breadcrumb',
       component: () => import('@/views/breadcrumb/index'),
       name: 'breadcrumb',
-      meta: { title: '列表页面:面包屑导航' }
+      meta: { title: '面包屑导航' }
     },
     {
       path: 'treeTransfer',

src/styles/index.scss

@@ -189,3 +189,27 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+
+.hljs {
+  line-height: 1.8;
+  font-family: Menlo, Monaco, Consolas, Courier, monospace;
+  font-size: 12px;
+  padding: 18px 24px !important;
+  background-color: #fafafa !important;
+  border: 1px solid #eaeefb;
+  margin-bottom: 25px;
+  border-radius: 4px;
+  -webkit-font-smoothing: auto;
+}
+
+code.demo {
+  color: #5e6d82;
+  background-color: #e6effb;
+  margin: 0 4px;
+  display: inline-block;
+  padding: 1px 5px;
+  font-size: 12px;
+  border-radius: 3px;
+  height: 18px;
+  line-height: 18px;
+}

src/utils/highlight.js

+import Vue from 'vue'
+import Hljs from 'highlight.js'
+import 'highlight.js/styles/googlecode.css'
+
+let Hightlight = {}
+// 美化页面上面展示的代码
+Hightlight.install = function (Vue, options) {
+  Vue.directive('highlight', function (el) {
+    let blocks = el.querySelectorAll('pre code')
+    blocks.forEach((block) => {
+      Hljs.highlightBlock(block)
+    })
+  })
+}
+
+export default Hightlight

src/views/breadcrumb/index.vue

 <template>
+  <div class="breadcrumb">
+    <aside>
+      页面头部的面包屑基于 <a target="_blank"
+                    href="https://element.eleme.cn/#/zh-CN/component/breadcrumb">elementUI的Breadcrumb组件</a>
+      <p>显示当前页面的路径，快速返回之前的任意页面。</p>
+    </aside>
+    <div class="box">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
+        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
+        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <p>
+      1.在 <code class="demo">navbar</code>组件中增加<code class="demo">breadcrumb</code>组件
+      写入侦听属性 <code class="demo">watch</code>，侦听路由<code class="demo">$route</code>，
+    </p>
+    <p v-html="watchhtml" v-highlight></p>
 
+    <p>
+      2.通过 <code class="demo">this.$route.match</code>方法得到当前路径的路由树，转化为层级列表<code class="demo">leavelist</code>，然后在渲染到页面上面即可
+    </p>
+    <p v-html="markdownhtml" v-highlight></p>
+    <p></p>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: "treeTransfer.vue"
+  export default {
+    name: "treeTransfer.vue",
+    data() {
+      return {
+        markdownhtml: `<pre><code class="hljs">
+            getBreadcrumb() {
+                let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+                const first = matched[0]
+                if (!this.isDashboard(first)) {
+                  matched = [{path: '/dashboard', meta: {title: 'dashboard'}}].concat(matched)
+                }
+                this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+            }
+        </code></pre>`,
+        watchhtml: ` <pre> <code class="hljs">
+              watch: {
+                     $route(route) {
+                       if (route.path.startsWith('/redirect/')) {
+                          return
+                        }
+                       this.getBreadcrumb()
+                     }
+                  },
+            </code> </pre>
+        `
+      }
     }
+  }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .breadcrumb {
+    margin: 40px;
+  }
+
+  .box {
+    margin-bottom: 40px;
+  }
 
 </style>