vue-routerが動作しない為、componentが表示されない

Question

現在vue.jsを勉強中でタスク管理アプリを作成中なのですが、

vue-routerがうまく動作しません。

/loginのパスにアクセスした時にlogin用のcomponentを描画させたいのですが、表示されず
悩んでいます

詳しい方ご教授お願いします。m(__)m

githubリンク

import KbnBoardView from '@/components/templates/KbnBoardView.vue'
import KbnLoginView from '@/components/templates/KbnLoginView.vue'
import KbnTaskDetailModal from '@/components/templates/KbnTaskDetailModel.vue'

export default [{
  path: '/',
  component: KbnBoardView,
  meta: { requiresAuth: true }
}, {
  path: '/login',
  component: KbnLoginView
}, {
  path: '/tasks/:id',
  component: KbnTaskDetailModal,
  meta: { requiresAuth: true }
}, {
  path: '*',
  redirect: '/'
}]

import Vue from 'vue'
import Router from 'vue-router'
import routers from './routes'

Vue.use(Router)
const router = new Router({ routers })
export default router

import Vue from 'vue'
import App from './App'
import router from './router'
import 'es6-promise/auto'
import store from './store'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

Answer 1

上から2番目のソースを次のように変更すると動きました．

// import routers from './routes'
import routes from './routes'

// const router = new Router({ routers })
const router = new Router({
  mode: 'history',
  routes
})

変更点は以下の通りです

1. routers -> routes // キー名のタイポミス
2. mode:'history' // history モードに変更

history モードに変更しない場合は，「http://localhost:8080/#/login」のように，hash を挟めばアクセス可能です．

参考：
ドキュメント-はじめに
ドキュメント-historyモード

Comments

[k-higa]

なんと！
今から仕事なので、帰ったら確認してみます！????
ありがとうございます！????