vue-router 中的外部模板答案

【问题标题】：External templates in vue-routervue-router 中的外部模板
【发布时间】：2019-06-05 17:36:07
【问题描述】：

我是 Vue 新手，已经迁移了一个小应用程序，但是现在想在前端级别添加路由，所以我开始研究 vue-router。

我的组件使用inline-template，因为它们被放置在 django 应用程序的模板中。这样，django 生态系统负责本地化，并为登录用户提供更多信息。

我找不到让我的组件与 vue-router 一起工作的方法。我什至使用x-templates 进行了测试，除非模板是 JS 代码中的字符串，否则它不起作用。

vue-router 可以使用外部文件模板吗？如果不是，vue-router如何处理后端服务器生成模板的情况？

【问题讨论】：

在深入之前，请确保您了解路由器的工作原理，尤其是路由器模式的权衡。如果您使用历史记录，则必须使用 django 实现路由器，否则您可能需要实现 SPA。无论哪种方式，如果您在后端框架中实现 javascript 路由，都会有一些痛苦。 router.vuejs.org/guide/essentials/history-mode.html
实际上我唯一需要的是将路由中使用的组件的模板存储在外部文件中。我在任何地方都找不到使用inline-template 和使用x-templates 的vue-router 示例我遇到了一个奇怪的错误，即根应用程序尝试呈现组件模板并且由于它没有数据而失败。我的组件是全局组件，因为它们在多个地方使用，并且我使用全局事件总线和 Vuex 来共享数据。

【解决方案1】：

我最终找到了如何让它发挥作用。诀窍是将x-templates 放在 Vue 应用程序根元素之外。这样，根 Vue 应用程序就不会尝试渲染它们，然后它们会被它们的组件渲染。

【讨论】：