将 Vue 文件的内容加载到 JavaScript 变量中以进行路由答案

【问题标题】：Loading a Vue file's content into a JavaScript variable for routing将 Vue 文件的内容加载到 JavaScript 变量中以进行路由
【发布时间】：2018-04-17 23:19:41
【问题描述】：

我已经尝试使用 vue-router 包好几天了，却没有弄清楚它是如何工作的，这让我发疯了。

我的问题：我想用VueJS做一个单页应用程序，我拿了vue-router包，因为它是VueJS开发团队官方支持的路由包。我已经阅读了很多“入门”文章，其中很多都是从硬写模板开始的：

const Foo = { template: '<div>foo</div>' }

但由于我并不真正将整个模板写在这两个引号之间，所以我搜索了一种将模板写入文件的方法，然后将文件的内容加载到 JS 变量中。似乎可以将模板写入 .vue 文件，然后使用以下命令将它们加载到变量中：

import App from './App.vue';

但是当我这样做时，我得到了这个错误：“意外的令牌导入”。

我真的很沮丧，他们有没有想过一种非常方便的方式让模板加载在每个浏览器上都兼容？我错过了什么？

【问题讨论】：

标签： import routing vue.js frontend vue-router

【解决方案1】：

我建议您查看 Vue CLI 以帮助您为项目设置所需的脚手架。根据您选择的选项，您最终可以使用 webpack 支持的模板以及包含的 vue-router。 Webpack 将负责打包你的项目，这样你就不会遇到类似的错误。

通常你想要做的是使用 vue 文件。一个 vue 文件分为三个部分，看起来像这样：

<template>
  // Your HTML for this component goes here
</template>

<script>
  // Your JS for this component goes here
</script>

<style>
  // Your CSS for this component goes here
</style>

一旦您将组件组织成这样，处理路由就非常简单了。您指定一个文件来包含处理路由的路由器对象。

这些都是基础知识，所以我不会在这里详细介绍，但您可以在官方 Vue docs 页面上了解更多信息。 Here也是一个示例项目，展示了如何在vue文件中构造简单的组件，以及如何正确使用vue-router。

【讨论】：