Cuando agrego el método beforeEach dentro de la constante del enrutador, la ruta App.vue deja de funcionar:
principales.ts:
import { createApp } from 'vue'
import './tailwind.css'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router/auto'
import { createHead } from '@vueuse/head'
const app = createApp(App)
const head = createHead()
const router = createRouter({
history: createWebHistory(),
}).beforeEach((to, from, next) => {
const publicPages = ['/'];
const authRequired = !publicPages.includes(to.path);
const loggedIn = !!sessionStorage.getItem('Orcamento:token');
if (authRequired && !loggedIn) {
next('/login');
} else {
next();
}
});
app.use(router)
app.use(head)
app.mount(document.body)
Aplicación.vue:
<script setup lang="ts">
import { computed } from "vue";
import useProject from '../src/stores/index';
const project = useProject();
const loggedIn = computed(() => project.status.loggedIn);
</script>
<template>
<navbar v-if="loggedIn" />
<div>
<header class="bg-white shadow" v-if="$route.meta.title">
<div></div>
</header>
<main>
<router-view />
</main>
</div>
</template>
Estoy usando Vue 3 y devDependecy unplugin-vue-router
Mensajes de error:
[Advertencia de Vue]: no se pudo resolver el componente: vue del enrutador
Si se trata de un elemento personalizado nativo, asegúrese de excluirlo de la resolución del componente a través de compilerOptions.isCustomElement.
en <App>
[Advertencia de Vue]: se accedió a la propiedad "$route" durante el procesamiento, pero no está definida en la instancia.
en <App>
[Advertencia de Vue]: error no controlado durante la ejecución de la función de procesamiento
en <App>
TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'meta')
en Proxy._sfc_render (App.vue:19:9)
El problema es que createRouter() devuelve un enrutador, pero beforeEach() no.
Así que cuando estás haciendo
// incorrect ❌
const router = createRouter().beforeEach();
el router termina siendo undefined , porque se le asigna el valor devuelto por beforeEach , en lugar de que se le asigne el valor devuelto por createRouter .
Una forma más detallada de escribir el código anterior:
// incorrect ❌
let router = createRouter();
router = router.beforeEach();
// router is now `undefined`
Para asignar correctamente el enrutador al router :
// correct ✅
const router = createRouter();
router.beforeEach();
/*
* here router is still the returned value of `createRouter()`,
* so it can be exported, used in the app, etc...
*/