Vue.js 如何将VUE路由器与本机HTML元素一起用作组件？

我的处境是：

• 旧项目，npm/vue编译器不可用
• 在香草JS香精中使用vue
• 使用路由器，这需要组件
• 我不想使用气味难闻的注入字符串，这对代码可读性非常不利

---

如何使用html片段作为vanilla JS vue的组件？

我找到了一个完全没有文档记录的解决方案，用于使用原生html制作vanilla JS组件：

1个纯HTML（无异味注入字符串）：

优点：

使用具有完整组件功能的vanilla JS vue

保持vue“样式组件逻辑”分开，但在同一文件中，不带 很难打破那种干净简单的模式

缺点：

---

页面的所有HTML必须在同一个文件中，因此此解决方案适用于较小的SPA或带有VUE的单个页面。

也许标题可以是“如何将VUE路由器与Vanilla JS一起使用”，因为使用Vanilla JS+HTML模板是文档中的第一件事，但关键是，文档中只声明使用带有注入字符串模板的router，我希望避免这种方法，因为原生html模板更好（正如编译的vue所做的那样）

   <div id="components" style="display:none"><!--hide component code-->
        <div id="component-category-index"><!--component 1 source code-->
            CATEGORY INDEX COMPONENT
        </div>
        <div id="component-article-show"><!--component 2 source code-->
            ARTICLE SHOW COMPONENT
        </div>
    </div>

const vue=new Vue({
    el: '#vue-app',
....your vue blabla.....
    router:new VueRouter({
        routes :[
            { path: '/article', component: { template: document.getElementById('component-article-show').outerHTML } },
            { path: '/categories', component: { template: document.getElementById('component-category-index').outerHTML } }
        ]
    })
})