vue-router问题

Question

vue-router问题。
先上代码：
app.vue

<template>
  <div>
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
        <router-view></router-view>
  </div>
</template>

<script>
  import header from './components/header/header.vue';
  export default{
    components: {
      'v-header': header
    }
  };
</script>

index.html

<div id="app">
    <router-view></router-view>
</div>

main.js

import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';
import goods from './components/goods/goods.vue';
import ratings from './components/ratings/ratings.vue';
import seller from './components/seller/seller.vue';
Vue.use(VueRouter);
var routes = [
 {path:'',component:App},
 {path: '/goods', component: goods},
 {path: '/ratings', component: ratings},
 {path: '/seller', component: seller}
];

var router = new VueRouter({
 routes
});

new Vue({
  router
}).$mount('#app')

我现在想实现的功能是类似tab选项卡那样的路由切换。对应的path刷新对应的router-view。但是我现在一点商品，直接整个页面变成商品那个组件了。
我知道可能是我router-view的位置不对，把整个app.vue进行渲染了。应该怎么修改才能实现类似tab选项卡那样的效果= =求大神指点。。。我已经晕了。。。

Answer 1

index.html去掉<router-view></router-view> 即可。