vue-router没加载组件

Question

main.js

import Vue from 'vue'
// import App from './App'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'

Vue.use(VueResource)
Vue.use(VueRouter)

import index from './components/index.vue'
import forget from './components/forget'

// const NotFound = { template: '<p>Page not found</p>' }

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  router: [
    { name: 'index', path: '/', component: index },
    { name: 'forget', path: '/forget', component: forget }
  ]
})

/* eslint-disable no-new */
const app = new Vue({
  router
})
app.$mount('#app')

app.vue

<template>

  <div id="app">
    <topBar></topBar>
    <router-view></router-view>
    <transition name="fade" mode="out-in">
        <router-view class="router"></router-view>
    </transition>
    <bottomBar></bottomBar>
  </div>

</template>

<script lang="babel">
  import './assets/css/common.css'
  import topBar from './components/header.vue'
  import bottomBar from './components/footer.vue'
  // import index from './components/index.vue'

  export default {
    components: {
      topBar,
      bottomBar
    }
  }

</script>

forget.vue

<template>
  <div>
    <topBar></topBar>
    <bottomBar></bottomBar>
  </div>
</template>

<script lang="babel">
  import topBar from './header.vue'
  import bottomBar from './footer.vue'

  export default {
    components: {
      topBar,
      bottomBar
    }
  }
</script>

也没任何报错

Answer 1

找到原因了.....
原来是router重名了...

Answer 2

在你的app.vue里

 <router-view></router-view>
 <transition name="fade" mode="out-in">
    <router-view class="router"></router-view>
 </transition>

这一段有问题，这里只能有一对<router-view>标签