场景：

有一个公共头部和底部，vue搭建的框架，在app.vue里写的公共方法，首页是个登录页面，不需要公共部分，在这基础上进行公共部分的显示隐藏。

即注册页、登录页、404页面都不要导航

首先定义一个可以隐藏的区域

<template>
<div v-show="zs">
  <router-link to="/config">系统设置</router-link>
</div>
 <!-- 路由占位符 -->
 <router-view></router-view>
</template>

完整代码：

<script lang="ts" setup>
import { ref } from 'vue';
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons-vue';
const selectedKeys = ref<string[]>(['1']);
const collapsed = ref<boolean>(false);
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

.site-layout .site-layout-background {
  background: #fff;
}
#components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgb(127, 252, 255);
    margin: 16px;
    font-size: 90px;
    text-align: center;
    font-family: 宋体;
  }
</style>

<!-- 后台结束 -->
<!-- 
<script lang='ts'>
import axios from 'axios';//引入axios进来
axios({
  method: 'post',
  headers: {  //带请求头token验证
          'token': localStorage.getItem('token')
           },
  url: '/url',
  data: {id:1}
   }).then(res=>{
      console.log(res.data);
  },err=>{
  console.log(err);
})
</script> -->

<script lang='ts'>
export default {
  data() {
    return {
      zs:false 
    }
  },
  computed: {
    greeting() {
      return this.message + '!'
    }
  },
  watch:{
    $route(to,from){
      if (to.path=='/login') {
        this.zs=false;
      }else{
        this.zs=true;
      }
    }
  },
  mounted() {
   this.path = this.$route.path;//当前路由
   if(this.$route.path == '/login'){
    this.zs = false;
   }
  }

}
</script>