前端VUE路由<router-view>無法渲染

在做一個底部導(dǎo)航，瀏覽器點擊<router-link>按鈕時能看到地址欄有跳轉(zhuǎn)到http://localhost:8080/#/vcontact但是<router-view>還是沒有渲染，代碼如下，請大神幫看看謝謝！

APP.vue部分：

<template>
  <div id="app">
    <v-header></v-header>
    <div class="middle">
      <v-search></v-search>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <v-footer></v-footer>
  </div>
</template>
<script>
import VHeader from './components/common/vheader.vue'
import VFooter from './components/common/vfooter.vue'
import VSearch from './components/common/vsearch.vue'
export default {
  components: {
    VHeader,
    VSearch,
    VFooter,
   }
  }
</script>

footer.vue組件部分：

<template>
    <div id="vfooter">
        <nav>
            <router-link to="/" tag="dl">
                <dt class= 'iconfont icon-wechat'></dt>
                <dd>微信</dd>
            </router-link>
            <router-link to="/vcontact" tag="dl">
                <dt class= 'iconfont icon-contact'></dt>
                <dd>通訊錄</dd>
            </router-link>
            <router-link to="/vexplore" tag="dl">
                <dt class= 'iconfont icon-find'></dt>
                <dd>發(fā)現(xiàn)</dd>
            </router-link>
            <router-link to="/vme" tag="dl">
                <dt class= 'iconfont icon-me'></dt>
                <dd>我</dd>
            </router-link>                
        </nav>

    </div>
</template>
<script type="text/javascript">
    export default{
    }
</script>

路由的目標(biāo)文件vcontact：

<template>
    <p>contact</p>
</template>
<script type="text/javascript">
    export default{}
</script>

Router文件夾下index.js文件：

import Vue from 'vue';
import Router from 'vue-router';
import vcontact from '../components/vcontact.vue';
import vexplore from '../components/vexplore.vue';
import vme from '../components/vme.vue';

Vue.use(Router)

export default new Router({
  routes: [
    {
     path: 'components/vcontact',
     component: vcontact
    },
    {
     path: 'components/vexplore',
     component: vexplore
    },
    {
     path: 'components/vme',
     component: vme
    }
  ]
})

main.js文件:

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

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})