Tengo un problema. Estoy haciendo un proyecto de software para la universidad pero quieren que usemos python. Sin embargo, se permite el front-end en javascript y dado que este es un curso especial para personas o programadores que no son de CompSci, incluso decidí usar la versión CDN de vue y vue-router para evitar npm, nodo, etc. para que sea más fácil para ellos.

Así que ahora tengo mis rutas definidas así en index.html dentro de una etiqueta de script definida debajo de todo,

 <script src="views/dashboard/dashboard.js"></script> <script src="views/input/input.js"></script> <script src="views/info/info.js"></script> <script src="views/settings/settings.js"></script> const routes = [ { path: '/', component: Dashboard }, { path: '/input', component: Inputpage }, { path: '/info', component: Infopage }, { path: '/settings', component: Settingspage }, { path: '/index.html', redirect: '/' } //default route. Leave this as such to ];

y Dashboard/Inputpage/.. etc. son archivos .js que importo. Info.js se ve así, por ejemplo

 var Infopage = { template: '<h1>This page is for information</h1>' };

Y eso se muestra bien. Sin embargo, cuando agrego algo más como ap o algo más simple como un segundo encabezado, un párrafo o una entrada, no sucede nada. ¿Qué puedo hacer para que muestre más que solo un encabezado?

EDICIÓN 1: lo intenté

 var Infopage = { template:`<div id='info_page'> <h1>This page is for information</h1> </div>` };

Y ahora aparece el error [Vue warn]: Error en nextTick: "InvalidCharacterError: String contiene un carácter no válido".