无法在 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 来保持进程运行ning（相反，我们使用普通的 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>

你必须让你的导入设置正常运行，但我从另一个问题中知道这被证明是棘手的。

如果您必须离开导入，您可以 link 到 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>

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

Unable to create Vue Router instance in JavaScript

javascript

routing

vue.js

.net-core

vue-router