命名视图

有的时候有的页面需要左侧的菜单栏或者头部，但是有的页面不需要，那么该如何根据不同的页面是否显示左侧的菜单栏呢。想一想我们设置每个页面的title的时候，都在定义路由的时候设置的，所以能不能在meta中新添加一个属性，通过该属性来判断是都显示菜单呢。

首先在router.js中配置路由

1
2
3
4
5
6
7
8
9
10
11
12
{
  name: 'super',
  path: '/super',
  meta: {title: '超管首页', showMenu: false},
  component: resolve => {require.ensure(['../pages/superAdmin/super.vue'], () => {resolve(require('../pages/superAdmin/super.vue'))})}
},
{
  name: 'card',
  path: '/card',
  meta: {title: '景区名片', showMenu: true, href: '/card'},
  component: resolve => {require.ensure(['../pages/card/card.vue'], () => {resolve(require('../pages/card/card.vue'))})}
}，

我们在meta对象中新增加属性showMenu，需要左侧菜单栏的时候设置false,不需要时设置为true,那么我们的app.vue是这样的

1
2
3
4
5
6
7
8
9
10
11
<!-- 左侧 -->
<div  class="main-left-menu" v-if="$route.meta.showMenu">
  <div v-for="(menu, index) in menuList" :key="index" :class="['tab-left', {active: hrefStr == menu.href}]" @click="showList(menu, index)">{{menu.name}}</div>
</div>

<!-- 内容区域 -->
<div :class="{'main-body': $route.meta.showMenu}">
  <template>
    <router-view></router-view>
  </template>
</div>

我们通过判断路由的meta的showMenu属性判断是否加载菜单

定义css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.main-left-menu{
  position: absolute;
  top:60px;
  bottom: 0;
  width: 240px;
  background:#3D436A;
  overflow: auto;
  .tab-left {
    font-size: 20px;
    line-height: 20px;
    padding:10px;
    color: #fff;
    margin-bottom: 10px;
    cursor: pointer;	
  }
  .active {
    background: #49507C;
  }
}
.main-body{
  position: absolute;
  left: 240px;
  top:60px;
  right: 0;
  bottom: 0;
  background:#eee;
  overflow: auto;
}

从上边的css可以看出，那么被选中的tab页签，改变样式并跳转路由，首次进入的时候，我们通过当前的href来判断到底是哪个页面，渲染视图，那么需要定义一个左侧菜单栏的循环数组，数组如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 menuList: [
  {
    name: '景区名片',
    href: '/card'
  },
  {
    name: '景区相册',
    href: '/photo'
  },
  {
    name: '旅游服务机构',
    href: '/org'
  }
]

能看出定义的href属性恰恰就是router.js中的路由地址，然后我们通过当前的地址（location.href）判断是哪个路由，添加active类，mounted代码如下：

1
2
let href = location.href.substring(location.href.lastIndexOf('#')+1)
this.hrefStr = href

然后点击左侧的菜单切换路由，添加一个方法为：

1
2
3
4
showList (menu, index) {
  this.hrefStr = menu.href
  this.$router.push({path: menu.href})
}

别以为完事了哦，有一个坑就是，如果用浏览器的回退按钮时，会发现，虽然页面跳转了，但是左侧菜单的状态并没有改变，只有刷新的时候才可以，所以才需要添加一个监听

1
2
3
4
5
watch: {
  '$route.meta.href' (val) {
    this.hrefStr = val
  }
}

这下就完美了，最后来一张效果图：
1.命名视图