javascript - 如何在 Vue CDN 和 Vue-router CDN 中使用 html 模板？

Question

我有个问题。我正在为大学做一个软件项目，但他们希望我们使用 python。javascript 前端是允许的，因为这是针对非 CompSci 人员或程序员的特殊课程，即使我决定使用 CDN 版本的 vue 和 vue-router 来避免 npm、node 等，以使他们更容易。

所以现在我在 index.html 中定义了我的路由，在所有内容下方定义的脚本标记内，

<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
];

和 Dashboard/Inputpage/.. 等是我导入的 .js 文件。例如，Info.js 看起来像这样

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

这显示得很好。但是，当我添加任何其他内容（如 ap）或更简单的内容（如第二个标题、段落或输入）时，什么也没有发生。我能做些什么让它显示的不仅仅是一个标题？

编辑1：我试过

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

现在我收到错误 [Vue warn]: Error in nextTick: "InvalidCharacterError: String contains an invalid character"。

标签： javascripthtmlvue.jsvue-router