<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>