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

问题描述

遵循指南，我到达了我需要的地方创建一个 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 仍然可以识别，只有它的路由器无法识别.如果导入很重要，我有一种感觉，如果省略，两者都会失败.

从'vue'导入Vue从 'vue-router' 导入 VueRouter

整个事情特别棘手，因为决定在 Net.Core 而不是 NodeJs 下运行它，所以我可能会受到限制.我们不会使用 Webpack 或 Browserify 来保持进程运行(而是使用普通的 dotnet run).在这个阶段不确定它是否是相关信息，但我读过它应该是哦，如此简单和容易"，但坦率地说，它似乎并不简单和容易.所以我怀疑如果在特定环境中部署它很容易，但在我的情况下需要一些动手按摩.

我可以通过什么来进一步调查该问题?

解决方案

以下是 vue-router 的基本设置，但是你肯定需要导入 vue &vue-router 能够像你一样引用它们:

从'vue'导入Vue；从 'vue-router' 导入 VueRouter；Vue.use( VueRouter );const Foo = { 模板:'<div>foo</div>'}const Bar = { 模板:'<div>bar</div>'}const 路由 = [{ path: '/foo', 组件: Foo },{ 路径: '/bar', 组件: Bar }]const 路由器 = 新的 VueRouter({路线})const app = new Vue({路由器}).$mount('#app')

<h1>你好应用程序！</h1><p><router-link to="/foo">转到Foo</router-link><router-link to="/bar">转到栏</router-link></p><路由器视图></路由器视图>

你必须让你的导入设置正常工作，但我从另一个问题中知道这很棘手.

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

Vue.use(VueRouter);const Foo = { 模板:'<div>foo</div>'}const Bar = { 模板:'<div>bar</div>'}const 路由 = [{ path: '/foo', 组件: Foo },{ 路径: '/bar', 组件: Bar }]const 路由器 = 新的 VueRouter({路线})const app = new Vue({路由器}).$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="应用程序"><h1>你好应用程序！</h1><p><router-link to="/foo">转到Foo</router-link><router-link to="/bar">转到栏</router-link></p><路由器视图></路由器视图>

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?

解决方案

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>

这篇关于无法在 JavaScript 中创建 Vue Router 实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！