Question

我正在审查Vue及其路由器组件，尽管在使路由器组件正常工作方面遇到一些问题。下面的控制台错误：

未捕获的ReferenceError：路由器未定义

大家好，

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

要使所有功能正常运行，您应该执行以下步骤：

更改脚本的顺序，因此您的- task: DotNetCoreCLI@2 displayName: Dotnet restore inputs: command: restore projects: '$(Parameters.RestoreBuildProjects)' feedsToUse: select vstsFeed: feed_name_goes_here排在最后。因为您需要在初始化应用程序之前先加载Vue和Vue路由器。

main.js

直接在浏览器中运行，从您的<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>中删除import。

main.js

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

2 个答案: