关注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 )。在这个阶段不确定它是否是相关信息,但我已经读到它应该是“哦,如此简单和容易”但是,坦率地说,它似乎不是简单易行。所以我怀疑如果在特定环境中部署它很容易,但在我的情况下需要一些动手按摩。
我可以进一步研究这个问题吗?
答案 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;
你必须让你的导入设置正常运行,虽然我从另一个问题中得知它已经证明是棘手的。
如果您必须远离导入,您只需链接到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')
&#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;