Tengo una aplicación Vue 3. Esta aplicación se basa en Vite, Vue Router, Pinia. Las versiones específicas son:
Esta aplicación tiene un único componente de archivo que representa una "página". Este componente de archivo único se define así:
página.vue
<template> <div> Hello! Thank you for visiting {{ id }}! </div> </template> <script setup> import { onMounted } from 'vue'; import { useStore } from '../stores/store'; const myStore = useStore(); onMounted(() => { const props = defineProps({ id:Number }); console.log(props); }); </script> Mi objetivo es que cuando alguien visite https://[my-site].com/pages/{some-id} , obtenga la id a través de la URL. Actualmente, mi ruta se define así:
{ path: '/pages/:id', name: 'page', component: () => import('../views/page.vue'), props: true } Según tengo entendido, dado que id es un parámetro en mi ruta, puedo usar el [defineProps][1] . Mientras se carga el componente de archivo único, no veo el id . Además, cuando miro en el registro de la consola, veo lo siguiente:
No capturado (en promesa) ReferenceError: defineProps no está definido
No entiendo por qué me sale este error. Otras preguntas que he visto mencionan cambiar ESLINT. Sin embargo, no estoy usando ESLINT en mi aplicación. Estoy usando Vite. ¿Cómo soluciono este error?
defineProps es una macro compiladora para usar en <script setup> . La macro se compila y no puede estar dentro de un enlace de ciclo de vida, como observó con onMounted() . Además, no tiene sentido definir accesorios dentro onMounted() porque los accesorios deben existir antes de que se monte el componente.
Los accesorios deben declararse en el nivel superior del contexto <script setup> :
<script setup> import { onMounted } from 'vue'; import { useStore } from '../stores/store'; const myStore = useStore(); const props = defineProps({ id:Number }); // ✅ onMounted(() => { // const props = defineProps({ id:Number }); // ❌ move to top level console.log(props); }); </script>