vue-router Uncaught ReferenceError: 路由器未定义答案

【问题标题】：vue-router Uncaught ReferenceError: router is not definedvue-router Uncaught ReferenceError: 路由器未定义
【发布时间】：2023-03-06 12:46:01
【问题描述】：

我正在审查 Vue 和它的路由器组件，尽管我在让路由器组件工作时遇到了一些问题。下面的控制台出错：

未捕获的引用错误：未定义路由器

大家好，

我正在将 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

我们将不胜感激...

非常感谢。

【问题讨论】：

如果第二个代码示例来自main.js，那么我建议您重新排序<script> 标签，将main.js 放在最后。否则，您能否包含错误的完整堆栈跟踪？

标签： javascript vue.js vue-router

【解决方案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 ... 语句。

【讨论】：

【解决方案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

【讨论】：