The front-end VUE route < router-view > cannot be rendered

in doing a bottom navigation, when the browser clicks the < router-link > button, you can see that the address bar jumps to http://localhost:8080/-sharp/vcontact, but < router-view > still does not render. The code is as follows. Please take a look at it. Thank you!

APP.vue section:

<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 component section:

<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>

destination file vcontact: of the route

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

index.js file under the Router folder:

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 file:

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

Vue.config.productionTip = false

new Vue({
  el: "-sharpapp",
  router,
  components: { App },
  template: "<App/>"
})

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