Question

vue-router 未捕获的 ReferenceError：路由器未定义

2019-08-09

8997

javascript vue.js vue-router

我正在检查 Vue 及其路由器组件，但在使用路由器组件时遇到了一些问题。控制台中的错误如下：

Uncaught ReferenceError: router is not defined

大家好，

我正在将 Vue 和 VueRouter 导入 index.html ，并尽力阅读文档以初始化路由器，但似乎无法正常工作。

在 index.html 中：

<script type="module" src="/assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

在 main.js 中：

import VueRouter from 'vue-router'

Vue.use(VueRouter)

var router = new VueRouter({
  routes: [
    { path: 'home', component: home } 
  ]
});

var app = new Vue({
  router,
  el: '#app',
  data: {
    ...etc

如能提供帮助，我们将不胜感激...

非常感谢。

Answer 1

您不能使用 import VueRouter from 'vue-router' AND <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

import 表示它将其作为 npm 依赖项，该依赖项将在编译时捆绑在 main.js 文件中。

您需要运行 npm install -save vue-router 或删除 import ... 语句。

Answer 2

似乎您没有任何构建过程，并且您直接在浏览器中加载 Vue 和 Vue Router。

要使一切正常，您应该遵循以下步骤：

更改脚本的顺序，以便您的 main.js 排在最后。因为您需要在初始化应用程序之前加载 Vue 和 Vue Router。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="module" src="/assets/js/main.js"></script>

从您的 main.js 中删除 import ，因为它直接在浏览器中运行。

Vue.use(VueRouter)

var router = new VueRouter({
  routes: [
    { path: 'home', component: home } 
  ]
});

var app = new Vue({
  router,
  el: '#app',
  data: {
    ...etc