vue中全局引入的组件如何在特定页面不引入

最新推荐文章于 2023-12-13 15:40:10 发布

lannieZ

最新推荐文章于 2023-12-13 15:40:10 发布

阅读量1.6k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/lannieZ/article/details/103013227

版权

vue 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

在App.vue对全局组件进行监听，利用v-if进行显示和隐藏

<template>
  <div id="app">
    <div v-if="headerShow">
      <Head></Head>
    </div>
    <router-view/>
  </div>
</template>

<script>
import Head from './components/head'
export default {
  name: 'App',
  data() {
    return {
      headerShow: true
    }
  },
  components:{
    Head
  },
  watch: {
    $route(to, from) {
      if (this.$route.path == "/login" || this.$route.path ==  "/register") {
        this.headerShow = false;
      } else {
        this.headerShow = true;
      }
    }
  }
}
</script>