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>