无法在JavaScript中创建Vue路由器实例 [英] Unable to create Vue Router instance in JavaScript

问题描述

按照指南，我到达了需要的地方创建一个Vue实例（似乎可行）。但是，我还需要在Vue的构造函数中提供Vuew Router的实例，如下所示。

Following the guide I arrived at the point where I need to create an instance of Vue (which seems to work). However, I also need to provide an instance of Vuew Router into the constructor of Vue, as shown below.

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

遗憾的是，它会产生以下错误。我不确定如何处理它，并且 googlearching 。

Regrettably, it produces the following error. I'm very uncertain on how to deal with it and troubleshooting seems to be rather sparesely documented when googlearching.

Uncaught ReferenceError: VueRouter is not defined(…)

我确保已经安装了两个软件包以及一些其他功能。

I made sure that I have both packages installed, plus some extras.

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

我还没有实现下面两个代码的导入（实际上并不确定在哪里放置代码，以及当我尝试使用 index.js 它吠叫无法识别令牌）。但是，我相信这些都不是必需的，因为Vue仍然可以被识别并且只有其路由器无法被识别。如果导入是至关重要的，我有一种感觉，如果省略，两者都会失败。

I haven't implemented the importing for those two below (not sure where to put in the code, really, and when I tried with my index.js it barked not recognizing the token). However, I believe that those are not required because Vue is still recognized and only its router fails to be recognized. If importing would be crutial, I have a feeling that both would fail if omitted.

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

整个过程特别棘手，因为要运行一个决定它在Net.Core下，而不在NodeJs下，所以我可能会受到限制。我们不会使用Webpack或Browserify来保持进程运行（相反，我们会继续运行 dotnet ）。不确定在此阶段是否有相关信息，但我已经读过它应该是 哦，这么简单又容易，但是坦率地说，这似乎简直就是简单。因此，我怀疑如果将其部署在特定的环境中很容易，但就我而言，需要进行一些手动按摩。

The whole thing is extra tricky because there's a decision to run it under Net.Core and not NodeJs, so I might be limited by that. We're won't be using Webpack or Browserify to keep the process running (instead we go the plain dotnet run). Not sure if it's relevant info at this stage but I've read that it's supposed to be "oh, so simple and easy" but, frankly speaking, it seems to be anything but simple and easy. So I suspect that it's easy if deployed in a certain environment but in my case requiring some hands-on massaging.

我可以通过哪些方法来进一步调查该问题？

What can I look into to investigate the issue further?

推荐答案

以下是vue-router的基本设置，但是的，您肯定需要导入vue& vue-router可以照原样引用它们：

Below is a basic set up for vue-router, but yes you definitely need to import vue & vue-router to be able to reference them as you are:

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>

您必须使导入功能正常运行，尽管我从另一个问题中知道这很棘手。

you'll have to get your import set up functioning for this to work though which I know from another question has been proving tricky.

如果要退出导入，您只需链接到html中的库，并省略顶部的2条导入行，即

If you have to move away from imports you can just link to the libaries in your html and omit the 2 import lines at the top, i.e.

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路由器实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！