无法在 JavaScript 中创建 Vue 路由器实例

Question

在the guide 之后，我到了需要创建 Vue 实例的地方（这似乎可以工作）。不过我还需要在Vue的构造函数中提供一个Vuew Router的实例，如下图。

const router = new VueRouter({ routes });
const app = new Vue({ router }).$mount('#app');

很遗憾，它会产生以下错误。我非常不确定如何处理它，并且在googlearching 时似乎很少记录故障排除。

Uncaught ReferenceError: VueRouter is not defined(…)

我确保我已经安装了这两个软件包，以及一些额外的。

+-- vue@2.0.8
+-- vue-cli@2.5.1
+-- vue-router@2.0.3

我还没有为下面的这两个实现导入（真的不知道在哪里放入代码，当我尝试使用我的 index.js 时，它吠叫不识别令牌）。但是，我认为这些不是必需的，因为 Vue 仍然可以识别，只有它的路由器无法识别。如果导入很重要，我感觉如果省略两者都会失败。

import Vue from 'vue'
import VueRouter from 'vue-router'

整个事情特别棘手，因为决定在 Net.Core 而不是 NodeJs 下运行它，所以我可能会受到限制。我们不会使用 Webpack 或 Browserify 来保持进程运行（而是使用普通的 dotnet 运行）。在这个阶段不确定它是否是相关信息，但我读到它应该是“哦，如此简单和容易”，但坦率地说，它似乎一点也不简单和容易。所以我怀疑如果部署在某个环境中很容易，但在我的情况下需要一些手动按摩。

我可以通过什么调查进一步调查此问题？

Answer 1

以下是 vue-router 的基本设置，但是是的，您肯定需要导入 vue 和 vue-router 才能按原样引用它们：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use( VueRouter );

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

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

您必须设置导入功能才能使其正常工作，尽管我从另一个问题中知道这很棘手。

如果您必须放弃导入，您可以只链接到 html 中的库并省略顶部的 2 条导入行，即

Vue.use( VueRouter );

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

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.3"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>