前端VUE路由无法渲染

Question

在做一个底部导航，浏览器点击<router-link>按钮时能看到地址栏有跳转到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>发现</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>

路由的目标文件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/>'
})

Answer 1

路由地址写错了，应该这样：

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