show conditional header based on url in vue js

<template>
  <div>
    <header v-if="showHeader">
      <!-- Your header content goes here -->
      <h1>Conditional Header</h1>
    </header>
    <!-- Your main content goes here -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeader: false,
    };
  },
  watch: {
    $route(to, from) {
      // Check the route and set showHeader accordingly
      this.showHeader = this.checkIfHeaderShouldBeVisible(to);
    },
  },
  mounted() {
    // Initial check when the component is mounted
    this.showHeader = this.checkIfHeaderShouldBeVisible(this.$route);
  },
  methods: {
    checkIfHeaderShouldBeVisible(route) {
      // Add your logic to determine if the header should be visible
      return route.path === '/your-condition'; // Example condition
    },
  },
};
</script>

<style>
/ Your styles for the header go here /
header {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
}
</style>