在app.vue里面注册的组件，然后想在首页不显示，需要怎样控制呢？vue切换路由的时候，在哪儿监控路由变化呢？

最新推荐文章于 2024-08-25 17:51:54 发布

柠檬不萌只是酸i

最新推荐文章于 2024-08-25 17:51:54 发布

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签：控制公共组件的显示与隐藏在watch里面监听路由的变化 vue切换路由的时候控路由变化

本文链接：https://blog.csdn.net/Miss_liangrm/article/details/102662154

版权

在Vue应用中，若要在除首页外的所有页面显示一个返回导航栏，可以在`app.vue`中注册该组件并利用路由监听来控制其显示与隐藏。通过在导航栏组件的`watch`中监听`$route`变化，根据当前路由是否为首页进行条件判断，从而实现组件的动态显示。具体实现代码未给出。

摘要由CSDN通过智能技术生成

需求是这样的：

除了首页之外，每个页面上都要显示一个【返回的导航栏】。

那么问题来了，怎样控制首页返回导航栏的显示与隐藏呢。

思路：

在【返回的导航栏】组件里面，监听路由的变化，然后在监听里面进行判断即可。

代码：

<template>
  <div id="back" v-if="isShowBack">
    <div class="back_box" @click="toBack()">
      <span class="left_arrow">
        <img src="../../../static/images/icon_arrow_bottom_left.png" />
      </span>
    </div>
  </div>
</template>

<script>
  var that;
  export default {
    data() {
      return {
        msg: '',
        isShowBack:false
      }
    },
    methods: {
      toBack() {
        console.log('点击了返回')
        this.$router.go(-1);
      }
    },
    watch:{
      '$route':function(){
        that = this;
        console.log('watch里面',that.$route.name);
        if(t