Estoy trabajando en Vue3 y soy nuevo en VueJS . Así que tengo un componente App.vue por defecto donde se representan todos los componentes, pero tengo un Login.vue y no quiero representar la parte <header></header> para login.vue . ¡Considere Login.vue como un componente estático!
aplicación.vue
<template> <header > <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> <div class="wrapper"> <HelloWorld msg="Knowledge Base System for IFIC Bank" /> <nav> <RouterLink to="/">Home</RouterLink> <RouterLink to="/about">About</RouterLink> <RouterLink to="/login">login</RouterLink> </nav> </div> </header> <RouterView/> </template>Creo que la mejor manera es usar el meta de tu ruta. De esta forma, la solución es reutilizable en otros contextos y no es específica de la ruta de inicio de sesión.
const router = new VueRouter({ routes: [ { path: '/login', component: Header, meta: { hideHeader: true } } ] }) y agregue un v-if con !route.meta.hideHeader
<script setup> import { useRoute } from "vue-router"; let route = useRoute(); </script> <template> <header v-if="!route.meta.hideHeader"> <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> <div class="wrapper"> <HelloWorld msg="Knowledge Base System for IFIC Bank" /> <nav> <RouterLink to="/">Home</RouterLink> <RouterLink to="/about">About</RouterLink> <RouterLink to="/login">login</RouterLink> </nav> </div> </header> </template><script> import { useRoute } from "vue-router"; export default { setup() { let route = useRoute(); return { route }; } }; </script>o configurar
<script setup> import { useRoute } from "vue-router"; let route = useRoute(); </script>Y luego tu plantilla
<template> <header v-if="route.path !== '/login'"> <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> <div class="wrapper"> <HelloWorld msg="Knowledge Base System for IFIC Bank" /> <nav> <RouterLink to="/">Home</RouterLink> <RouterLink to="/about">About</RouterLink> <RouterLink to="/login">login</RouterLink> </nav> </div> </header> <RouterView/> Use useRoute , devuélvalo en su función de configuración.
Ahora puedes usar route.path y un v-if
Puede extraer el encabezado en un componente y pasarlo a los otros componentes. Allí podría usar el componente de encabezado o no.