Vue导航栏

1. 引言

        Vue的项目中，导航栏是经常需要使用到的，主要的是如何将公共的导航栏引用到页面上，这里主要讲解常用的两种方式

2. 第一种，传统的在页面上逐一添加

2.1 公共导航栏

首先我们需要一个公共的导航栏，里面的div内容就不展示了，主要展示的是引用的步骤，具体的div样式，在elementUI的官网有。

<template>
    <div>导航栏</div>
</template>
<script>
	export default {
		name:"AsideBar"
	  }
</script>
<style>
</style>

2.2 导入需要添加的页面

        在我们需要添加的页面上进行导入

<template>	
	<div>
		<AsideBar></AsideBar>
	</div>
	
</template>

<script>
// 这里注意导包的时候，需要导入你自己的导航栏所在的地址
import AsideBar from "@/components/common/AsideBar";
export default {
	name:'IndexView',
	components:{
		"AsideBar":AsideBar
	}
}
</script>
<style>
</style>

通过以上操作，就是最简单的导入公共导航栏。

3. 第二种，全局设置，导航栏在部分页面显示，在部分页面不显示

3.1 公共导航栏

跟2.1一样，编写好你需要的导航栏样式

<template>
    <div>导航栏</div>
</template>
<script>
	export default {
		name:"AsideBar"
	  }
</script>
<style>
</style>

 3.2 修改App.vue配置

<template>
	<div id="app">
        // 注意，这里的meta的下的属性是随意的，只是习惯性设置keepAlive，后面会有讲解
		<div v-if="$route.meta.keepAlive">
			<AsideBar></AsideBar>
			<router-view></router-view>
		</div>
		<router-view v-if="!$route.meta.keepAlive"></router-view>
	</div>
</template>

<script>
	import AsideBar from "@/components/common/AsideBar";
	export default {
		name: 'commonBar',
		components: {
			"AsideBar": AsideBar
		}
	}
</script>

<style>
	#app {}
</style>

3.3 修改index.js的配置

        在我们需要显示的页面，将meta下的属性值设置为ture，不需要的设置为false，默认不进行配置就是不显示

{
	  path:'/IndexView',
	  name:'IndexView',
	  component:IndexView,
	  meta: {
	          keepAlive: true
	        }
  }

通过以上操作就能对我们的公共导航栏进行全局设置了，第二种方法更加简单，并且配置更加快速。

4. 问题

        前面说了，meta下的属性是自定义的，并不是网上说的是keepAlive进行绑定的。以下就是对结果的测试。

4.1 监听路由

监听路由$router以后，路由变化后会发现meta属性中多出了刚才设置的keepAlive属性。 

4.2 meta

meta到底是什么？

在vue给的官方文档中，meta是这样定义的

 any：任何

所以你明白了吗，meta可以是任何属性

4.3 测试

我们将keepAlive改为其他参数

<template>
	<div id="app">
        // 注意，这里的meta的下的属性是随意的，只是习惯性设置keepAlive，后面会有讲解
		<div v-if="$route.meta.a">
			<AsideBar></AsideBar>
			<router-view></router-view>
		</div>
		<router-view v-if="!$route.meta.a"></router-view>
	</div>
</template>

<script>
	import AsideBar from "@/components/common/AsideBar";
	export default {
		name: 'commonBar',
		components: {
			"AsideBar": AsideBar
		}
	}
</script>

<style>
	#app {}
</style>

你会发现，效果依然是完美的！

甚至可以把true改为2，flase改为1。 APP.vue中的代码改为如下：

<template>
	<div id="app">
        // 注意，这里的meta的下的属性是随意的，只是习惯性设置keepAlive，后面会有讲解
		<div v-if="$route.meta.keep === 1">
			<AsideBar></AsideBar>
			<router-view></router-view>
		</div>
		<router-view v-if="!$route.meta.keep === 2"></router-view>
	</div>
</template>

<script>
	import AsideBar from "@/components/common/AsideBar";
	export default {
		name: 'commonBar',
		components: {
			"AsideBar": AsideBar
		}
	}
</script>

<style>
	#app {}
</style>