分4步驟

1.在App.vue裡面定義好連結

2.寫好定義連結的元件

3.因為我是裝vue的時候 選擇了安裝（自動生成的在router檔案裡面的index.js）在這裡定義好你路由的選項

4.main.js引入router路由（預設是引入了的）

<template>
  <div id="app">
     <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>
<style lang="stylus" rel="stylesheet/stylus">
#app
.tab
display: flex
width: 100%
      height
 
: 40px
line-height: 40px
.tab-item
flex: 1
text-align: center
</style>

都一樣的改一下div的內容就可以了

router下的index.js（一定要寫path: '/xxx'）如果你只path: '/'  它就會顯示主頁注意了小夥伴門

import Vue from 'vue'
import Router 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(Router)
export default new Router({
routes: [
    {
path: '/goods',
name: 'goods',
component: goods
    },
    {
path: '/ratings',
name: 'ratings',
component: ratings
    },
    {
path: '/seller',
name: 'seller',
component: seller
    }
  ]
})