Question

我正尝试从https://github.com/coffcer/vue-chat修改此项目。

我想有另一个用于登录的页面，所以我添加了另一个组件（vue）并使用vue-router来完成。这是我的步骤：

在vue-router中添加一个依赖项（package.json）：

   "dependencies": {
    "babel-polyfill": "^6.13.0",
    "babel-runtime": "^6.0.0",
    "vue": "^1.0.0",
    "vuex": "^0.8.2",
    "vue-router": "^3.1.6"

  }

创建一个名为router.js的文件：

import Vue from "vue";
import VueRouter from "vue-router";


import chat from "components/chat";


Vue.use(VueRouter);

const routes = [
    {
        path:"/chat",
        component: chat
    }
]

var router =  new VueRouter({
    routes
})
export default router;

在main.js中：

// polyfill
import 'babel-polyfill';

import Vue from 'vue';
import App from './App';
import store from './store';

import router from "./router.js"


Vue.config.devtools = true;


const ins = new Vue({
    el: '#app',
    router,
    components: { App },
    store: store,
    render: h => h(App)
});

console.log(router)
console.log(ins)
console.log(ins.$router)

最后，我可以看到router和ins的实例，但是 console.log(ins.$router)引发异常：

Uncaught TypeError: Cannot read property '_router' of undefined
    at Vue.get (eval at <anonymous> (build.js:3313), <anonymous>:1250:52)
    at eval (eval at <anonymous> (build.js:1051), <anonymous>:36:17)
    at Object.<anonymous> (build.js:1051)
    at __webpack_require__ (build.js:556)
    at fn (build.js:87)
    at Object.<anonymous> (build.js:588)
    at __webpack_require__ (build.js:556)
    at build.js:579
    at build.js:582

Vue在控制台中的返回：

Vue {$el: div#app, $parent: undefined, $root: Vue, $children: Array(1), $refs: {…}, …}
$data: Object
$router: [Exception: TypeError: Cannot read property '_router' of undefined at Vue.get (eval at <anonymous> (http://localhost:8080/dist/build.js:3313:2), <anonymous>:1250:52) at Vue.invokeGetter (<anonymous>:1:142)]
$route: [Exception: TypeError: Cannot read property '_route' of undefined at Vue.get (eval at <anonymous> (http://localhost:8080/dist/build.js:3313:2), <anonymous>:1254:52) at Vue.invokeGetter (<anonymous>:1:142)]
$el: div#app
$parent: undefined
$root: Vue {$el: div#app, $parent: undefined, $root: Vue, $children: Array(1), $refs: {…}, …}
$children: [VueComponent]
$refs: {}
$els: {}
_watchers: []
_directives: [Directive]
_uid: 1
_isVue: true
_events: {hook:attached: Array(1), hook:detached: Array(1)}
_eventsCount: {}
_isFragment: false
_fragmentEnd: null
_fragmentStart: null
_fragment: null
_vForRemoving: false
_isBeingDestroyed: false
_isAttached: true
_isReady: true
_isDestroyed: false
_isCompiled: true
_unlinkFn: ƒ ()
_context: undefined
_scope: undefined
_frag: undefined
$options: {directives: {…}, elementDirectives: {…}, filters: {…}, transitions: {…}, components: {…}, …}
_data: {__ob__: Observer}
$store: Store {_getterCacheId: "vuex_store_0", _dispatching: false, _mutations: {…}, _rootMutations: {…}, _modules: {…}, …}
_propsUnlinkFn: null
__proto__: Object

我该如何解决？谢谢。

Answer 1

我认为您没有将App组件导入main.js文件中。

var query = (from user in users
                    join consent in consents
                        on user.Id equals consent.IdUser
                    group new {user, consent} by new {consent.Type, consent.IdUser} into g 
                    select new { 
                            g.FirstOrDefault().user.Id, 
                            g.FirstOrDefault().user.Name,
                            g.FirstOrDefault().user.SureName,
                            ConsentId = g.FirstOrDefault().consent.Id,
                            g.FirstOrDefault().consent.IdUser,
                            g.FirstOrDefault().consent.Type,
                            g.FirstOrDefault().consent.Origin,
                            Date = g.Max(m => m.consent.Date),
                            g.FirstOrDefault().consent.ConsentFlag
                        }).ToList();

并确保您的App组件具有import Vue from 'vue' import App from "./App.vue" import router from "./router" new Vue({ router, render: h => h(App) }).$mount('#app')标签

为什么路由器未定义？

1 个答案: