javascript - vue-router未捕获ReferenceError:未定义路由器

Question

我正在审查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' 和 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
import表示它期望它是npm依赖项，编译时将 bundle 在main.js文件中。

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