无法在JavaScript中创建Vue Router实例

时间:2016-11-27 10:38:30

标签: javascript routing vue.js .net-core vue-router

关注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 run )。在这个阶段不确定它是否是相关信息,但我已经读到它应该是“哦,如此简单和容易”但是,坦率地说,它似乎不是简单易行。所以我怀疑如果在特定环境中部署它很容易,但在我的情况下需要一些动手按摩。

我可以进一步研究这个问题吗?

1 个答案:

答案 0 :(得分:2)

下面是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')
&#13;
<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>
&#13;
&#13;
&#13;

你必须让你的导入设置正常运行,虽然我从另一个问题中得知它已经证明是棘手的。

如果您必须远离导入,您只需链接到html中的库,并省略顶部的2个导入行,即

&#13;
&#13;
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')
&#13;
<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>
&#13;
&#13;
&#13;