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

Question

几天来我一直在尝试使用 vue-router 包，但不知道它是如何工作的，这让我有点抓狂。

我的问题：我想用VueJS做一个单页应用，我拿了vue-router包，因为它是VueJS开发组官方支持的路由包。我读了很多 "getting started" 文章，其中很多文章都是从像这样硬写模板开始的：

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

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

import App from './App.vue';

但是当我这样做时，我得到了这个错误："Unexpected token import"。

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

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 page. Here也是一个示例项目，展示了如何在vue中构建简单的组件文件以及如何正确使用 vue-router。

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

Loading a Vue file's content into a JavaScript variable for routing

import

routing

frontend

vue.js

vue-router