Unable to create Vue Router instance in JavaScript

问题

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');

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

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'

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?

回答1:

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.

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>

来源：https://stackoverflow.com/questions/40827986/unable-to-create-vue-router-instance-in-javascript

标签

javascript

routing

Vue.js

.net-core

vue-router