Quiero usar diferentes componentes para el sitio web del panel de administración. Intento eso;
// App.vue <template> <PanelTemplate v-if="$route.meta.template == 'panel'"/> <WebsiteTemplate v-if="$route.meta.template == 'website'"/> </template> <script> import PanelTemplate from './templates/PanelTemplate.vue' import WebsiteTemplate from './templates/WebsiteTemplate.vue' export default { components : { PanelTemplate, WebsiteTemplate } } </script> // Router.js { path: "/panel/dashboard", name : "panel-index", component: PanelView, meta : { template : 'panel' } }, { path : "/", name : "website-index", component : WebsiteView, meta : { template : 'website' } }, // PanelTemplate.vue - WebsiteTemplate.vue <template> <router-view></router-view> </template> Pero eso no está funcionando. Intento component tag también, pero eso tampoco funciona. Solo veo una pantalla en blanco, ambos componentes no llaman. ¿Qué tengo que hacer?
Si desea que cada componente tenga su propia plantilla separada (el caso más común), simplemente colóquelo como etiqueta <template> en el archivo .vue . No necesita especificarlo en la ruta y no necesita un identificador.
Ejemplo de estructura de archivo .vue (llamada SFC - componente de archivo único):
<template> /// template here </template> <script> ... </script> <style> ... </style> Si desea utilizar la misma plantilla para varios componentes, puede colocar cualquier cantidad de plantillas en cualquier lugar de su página. Dado que deben estar disponibles en todo momento, podrían ser hijos directos de <body> :
<body> <div id="app"> ... </div> <template id="panel-tpl"> ...panel template content goes here </template> </body> Ahora puede usar esta plantilla en tantos componentes como desee, configurando la propiedad de la plantilla en #panel-tpl :
<script> import { defineComponent } from 'vue' export default defineComponent({ template: '#panel-tpl', // the rest of your component }) </script> Nota: esta vez, la plantilla necesita un identificador. Tenga en cuenta que el identificador ( id ) debe ser único en todo el HTML de la página (ningún otro elemento HTML debe tener el mismo id ).
Sintaxis alternativa para la plantilla:
<script type="text/x-template" id="panel-tpl"> // template contents here </script>La etiqueta router-view debe estar presente en App.vue y envuelta por uno de los componentes de la plantilla:
<template> <component :is="currentTemplate"> <router-view></router-view> </component> </template> <script> import PanelTemplate from './templates/PanelTemplate.vue' import WebsiteTemplate from './templates/WebsiteTemplate.vue' export default { computed:{ currentTemplate(){ return this.$route.meta.template } }, components : { PanelTemplate, WebsiteTemplate } } </script>