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

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 render: h => h(App)
});

<template>
 <div id="app">
   <div class="tab">
    <div class="tab-item">
     <router-link to="/goods">商品</router-link>
    </div>
    <div class="tab-item">
     <router-link to="/ratings">評(píng)論</router-link>
    </div>
    <div class="tab-item">
     <router-link to="/seller">商家</router-link>
    </div>
   </div>
   <div>
    <router-view></router-view>
   </div>
 </div>
</template>

<script>
 export default {
  name: 'app',
  components: {

  }
 };
</script>

<style lang="stylus" rel="stylesheet/stylus">
 .tab
  display: flex
  width: 100%
  height: 40px
  line-height: 40px
  .tab-item
   flex: 1
   text-align: center
   & > a
    display: block
</style>

import Vue from 'vue';
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);

const routes = [
 { path: '/goods', component: goods },
 { path: '/ratings', component: ratings },
 { path: '/seller', component: seller },
 { path: '*', redirect: '/goods' }
];

const router = new VueRouter({
 routes: routes   //注意是routes而不是routers,坑就在這里
});

export default router;