Невозможно создать экземпляр Vue Router в JavaScript

Question

После the guide Я достиг точки, где мне нужно создать экземпляр Vue (который, похоже, работает). Однако мне также необходимо предоставить экземпляр Vuew Router в конструктор Vue, как показано ниже.

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). Не уверен, что это актуальная информация на этом этапе, но я читал, что это должно быть «о, так просто и легко», но, честно говоря, кажется, что-то просто, но просто. Поэтому я подозреваю, что это легко развертывать в определенной среде, но в моем случае требует практического массажа.

Что я могу изучить для дальнейшего изучения проблемы?

Answer 1

Ниже приведен базовый набор для вю-маршрутизатора, но да, вам обязательно нужно импортировать вю & вю-маршрутизатор, чтобы иметь возможность ссылаться на них, как вы:

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>

вам нужно будет настроить ваш импорт для работы, хотя то, что я знаю из другого вопроса, оказалось сложным.

Если вы должны отойти от импорта вы можете просто ссылки на найти библиотеки в вашем 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>