增加视图模式切换demo

src/views/common/BreadCrumb.vue

@@ -1,8 +1,14 @@
 <template>
-  <nav class="breadcrumb is-hidden-mobile is-hidden-touch" aria-label="breadcrumbs">
+  <div>
+    <nav
+      class="breadcrumb is-hidden-mobile is-hidden-touch level g2-breadcrumb"
+      aria-label="breadcrumbs"
+    >
+      <div class="level-left">
+        <div class="level-item">
           <ul>
             <li>
-        <a v-show="navs && navs.length>0" @click="go('/'+index+':/')">{{$t('index')}}</a>
+              <a @click="go('/'+index+':/')">{{$t('index')}}</a>
             </li>
             <li
               v-for="(item,index) in navs"
@@ -13,7 +19,22 @@
               <a v-else @click="go(item.path)">{{item.title}}</a>
             </li>
           </ul>
+        </div>
+      </div>
+      <div class="level-right">
+        <div
+          class="level-item"
+          v-show="$route.meta.view==='list'"
+          :title="$route.meta.view==='list'?'列表视图':'网格视图'"
+          @click="changeView"
+        >
+          <span class="icon">
+            <i :class="'fa'+(listMode ? ' fa-th': ' fa-th-list')" aria-hidden="true"></i>
+          </span>
+        </div>
+      </div>
     </nav>
+  </div>
 </template>
 
 <script>
@@ -23,7 +44,8 @@ export default {
   data: function () {
     return {
       navs: [],
-      index: "/"
+      index: "/",
+      listMode: true
     };
   },
   mounted () {
@@ -74,7 +96,29 @@ export default {
         }
         this.navs = navs;
       }
+    },
+    changeView () {
+      this.listMode = !this.listMode;
     }
   }
 };
 </script>
+<style lang="scss" scoped>
+.g2-breadcrumb {
+  border-bottom: 2px solid whitesmoke;
+  height: 100%;
+  padding: 0 0.75em;
+}
+.level-right {
+  .level-item {
+    border-radius: 50%;
+    height: 40px;
+    width: 40px;
+    &:hover {
+      border: 1px dotted transparent;
+      background: rgba(0, 0, 0, 0.12);
+      text-decoration: none;
+    }
+  }
+}
+</style>

src/views/common/Footer.vue

@@ -10,8 +10,10 @@
             >goindex-theme-acrou</a>
             <span class="tag is-light">
               MIT &nbsp;
+              <span class="icon">
                 <i class="fab fa-github"></i>
               </span>
+            </span>
           </div>
         </div>
       </div>