Vue-Router引发“ ReferenceError:未定义jQuery”

时间:2019-01-29 11:09:34

标签: jquery vue.js npm vuejs2 vue-router

我正在建立一个新的vue项目,并且路由器在控制台中抛出以下错误消息:

“ [vue-router]无法解析异步组件默认值:ReferenceError:未定义jQuery

[vue-router]路线导航期间未捕获的错误:

ReferenceError:未定义jQuery”

我检查了jQuery是否已导入* .vue文件:是这种情况。另外,我通过npm重新安装了jQuery包。

Formular1.vue:

<script>
    import JQuery from 'jquery'
    let $ = JQuery;

    some code...

</script>

router.js:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ 
'./views/About.vue')
    },
    {
      path: '/formular1',
      name: 'formular1',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "formular1" */ 
'./views/Formular1.vue')
    }
  ]
})

我希望执行vue文件,但是会出现错误。

感谢所有帮助。


编辑: Formular1.vue:

<template>
    <div>
        <table>
            <thead>
                <th v-for="data in datas" :key="data.ED_KBEVLID"></th>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</template>

<script>
    import jQuery from 'jquery'
    let $ = jQuery;

    export default {
        name: 'Formular1',

        data: function () {
            return {
                datas: [],
            }
        },

        methods: {
            lade_daten: function () {
                let vm = this;
                $.getJSON("/api/call_evm.php", function(result){
                   vm.datas = result;
                });
            }
        },

        mounted(){
            this.lade_daten();
        }
    }
</script>

1 个答案:

答案 0 :(得分:1)

jQueryJQuery不同,可能是问题所在。

检查代码中的每个地方是否都使用相同的字母大小写以相同的方式编写。