Почему роутер не определен?

Question

Я пытался изменить этот проект: https://github.com/coffcer/vue-chat.

Я хочу иметь другую страницу, которая используется для входа в систему, поэтому я добавляю другой компонент (vue ) и используйте vue-router для этого. Вот мои шаги:

1. Добавить зависимость (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

Я думаю, вы не импортировали свой компонент приложения в основной файл. js.

import Vue from 'vue'
import App from "./App.vue"
import router from "./router"

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

и убедитесь, что ваш компонент приложения имеет тег <router-view :key="$route.fullPath"></router-view>

Answer 2

Я думаю, что вы забыли про рендер. Вы также должны предоставить id для el свойства. Попробуйте это:

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

Поскольку вы забыли о рендере, вполне возможно, что маршрутизатор не подключен к вам Vue приложение.

Я использовал #app, потому что я вижу этого автора этот репозиторий, который вы хотите изменить, присваивает #app своему основному прилож. vue компонент

РЕДАКТИРОВАТЬ 2

Попробуйте переместить все в main.js. Мы убедимся, что вы подключили маршрутизатор до того, как создали приложение Vue. Пример ниже:

import Vue from 'vue'
import App from "./App.vue"
import Router from 'vue-router'

Vue.use(Router);

// test path myabe something is wrong with your new component
const routes = [
    {
        path:'/',
        name: 'App',
        component: App
    }
]

const router =  new VueRouter({
    routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Также убедитесь, что вы добавили маршрутизатор в свой основной компонент (в вашем приложении может быть только один маршрутизатор)