vue 控制组件在不同页面的显示

情况一：只有少量页面要显示或隐藏组件

比如：只有在登录注册页面，才不需要显示MHead组件。

思路:在app.vue页面使用MHead组件，利用v-show或v-if来实现显示|隐藏。

<script >
import { RouterView } from 'vue-router'
import MHeader from './components/MHeader.vue';
export default{
  components:{MHeader}
};
</script>

<template>
  <MHeader v-show="$route.path!='/login'"></MHeader>
  <RouterView />
</template>

情况二：有大量的页面需要显示或隐藏组件

在这种情况下，使用上面的写法是一件非常费力且不好管理的方式。

用数组来管理
用路由元信息

思路一:将要显示的页面地址存在数组中，判断$route.path不等于数组中元素。

可以使用数组的indexOf()方法，判断$route.path是否存在于数组a中，如果不存在则返回true。示例如下：

<script >
import { RouterView } from 'vue-router'
import MHeader from './components/MHeader.vue';
export default{
  components:{
    MHeader
  },
  data(){
    return{
      hasHead:['/login','/a','/b','/c','/d','/e']
    }
  }
};
</script>

<template>
  <!-- <MHeader v-show="$route.path!='/login'"></MHeader> -->
  <MHeader v-if="this.hasHead.indexOf($route.path)"></MHeader>
  <RouterView />
</template>

思路二:为需要显示的组件的的页面配置路由元信息meta。

在定义路由时配置meta，meta为组件实例身上$route的一个属性。

我们可以将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。

import { RouterView } from 'vue-router'
import MHeader from './components/MHeader.vue';
export default{
  components:{MHeader}
};
</script>

<template>
  <MHeader v-if="$route.meta.showHead"></MHeader>
  <RouterView />
</template>

  <MHeader v-if="$route.meta.showHead"></MHeader>

思路一和思路二对比：更推荐使用思路二的方案。

使用数组虽然方便，但是在页面快速刷新的时候，MHeader组件会闪现。使用meta则不会出现该问题。