Question

我一直试图使用vue-router软件包好几天而不弄清楚它是如何工作的，这让我很疯狂。

我的问题：我想使用VueJS制作单页应用程序，并且我已经采用了vue-router软件包，因为它是VueJS开发团队正式支持的路由软件包。我已经阅读了很多＆＃34;入门＆＃34;文章，很多都是从硬编写模板开始的：

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

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

import App from './App.vue';

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

我真的对此感到沮丧，他们是否想过一种非常方便的方式让模板加载在每个浏览器上兼容？我错过了什么？

Answer 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。

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

1 个答案: