vue - 動態導航欄

intro

• 需求

路由到不同頁面根據需求載入不同導航（顯示其他或不顯示）

實現

主頁頭部

      <div class="left_menu">
        <span class="logo_box">
          <img src="~@/assets/img/logo.png" alt="" />
        </span>
        <span class="navbar_title">{{ title }}</span>
        <div id="LayoutNavBar"></div>
      </div>
 

插槽元件

// LayoutNavBar.vue
<template>
  <div class="layout_left_navbar">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'LayoutNavBar',
  mounted() {
    let layoutNavBar = document.getElementById('LayoutNavBar');
    layoutNavBar.innerHTML = '';
    layoutNavBar.appendChild(this.$el);
  },
};
</script>
<style lang="scss" scoped>
.layout_left_navbar {
  margin-left: 10px;
}
</style>
 

use

• 路由部分頁面根據需要在插槽部分編輯內容

<template>
  <div class="about">
    <LayoutNavBar>
      <router-link to="/">
        <el-button>home 全部案件1</el-button>
        <el-button round>全部案件</el-button>
      </router-link>
    </LayoutNavBar>
    <h1>This is an about page</h1>
  </div>
</template>
 

notice

空白導航(隱藏)

不需要動態導航的頁面需要引入空插槽重置為空導航內容

// xxx.vue
  <div>
    <LayoutNavBar />
    ......
  </div>

省略

和上級路由保持一致的頁面可以省略導航插槽