vue - 动态导航栏
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>
省略
和上级路由保持一致的页面可以省略导航插槽
Lee2