<template>
    <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
        <sidebar class="sidebar-container"></sidebar> 
        <div class="main-container">
            <navbar></navbar>  
            <!-- 頂部 -->
            <tags-view>
 
</tags-view>
            <!-- tag -->
            <app-main></app-main>
            <!-- 主體 -->
        </div>
    </div>
</template>

左側導航欄

import ScrollBar from "@/components/ScrollBar";

這是一個自定義元件，把導航欄包起來了

<template>
  <div class="scroll-container"
 
 ref="scrollContainer" @wheel.prevent="handleScroll" >
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
      <slot></slot>
    </div>
  </div>
</template>

右側內容分為上中下

上（控制展開）

 mutations: {
        TOGGLE_SIDEBAR: state =>
 
 {
            if (state.sidebar.opened) {
                Cookies.set('sidebarStatus', 1)
            } else {
                Cookies.set('sidebarStatus', 0)
            }
            state.sidebar.opened = !state.sidebar.opened
        },
        SET_LANGUAGE: (state, language) => { //通過mutations來改變中英文狀態
            state.language = language
            Cookies.set('language', language)
        }
    },
 actions: {
        toggleSideBar({ commit }) {
            commit('TOGGLE_SIDEBAR')
        },
        setLanguage({ commit }, language) {
            // 通過actions來改變中英文狀態 （還是通過commit，呼叫mutations中的方法）
            // 只是在這個方法中可以非同步來改變
            commit('SET_LANGUAGE', language)
        }
    }

toggleSideBar() {
      this.$store.dispatch('toggleSideBar')
       //改變state.sidebar.opened和cookie來展示狀態
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload()// In order to re-instantiate the vue-router object to avoid bugs
      })
    }

上（麵包屑）

watch: { //監聽路由，路由變化 執行this.getBreadcrumb()
    $route() {
      this.getBreadcrumb() 
    }
  }

created() {//鉤子函式
    this.getBreadcrumb()
  }

上（全屏）

上（登出）