<template>   <div class="header">     我是header頭部  </div> </template> <script type="text/ecmascript-6">   export default {  }; </script><style lang="stylus" rel="stylesheet/stylus">   .header     color:#fff     background:rgba(7,17,27,0.5)     text-align:center     height:40px     line-height:40px </style>goods.vue的代碼如下,其他兩個類似<template>   <div class="goods">     我是goods組件  </div> </template> <script type="text/ecmascript-6">   export default {  }; </script><style lang="stylus" rel="stylesheet/stylus"> </style>

<template>   <div id="app">     <!--頭部組件-->     <v-header></v-header>     <div class="tab border-1px">       <div class="tab-item">         <router-link to="/goods/goods">商品</router-link>       </div>       <div class="tab-item">         <router-link to="/ratings/ratings">評價</router-link>       </div>       <div class="tab-item">         <router-link to="/seller/seller">商家</router-link>       </div>     </div>     <!-- keep-alive:緩存所有的頁面,防止重復渲染DOM -->     <keep-alive>       <router-view></router-view>     </keep-alive>   </div> </template> <script type="text/ecmascript-6">   // 引人組件  import header from '@/components/header/header';   export default {     components: {       'v-header': header     }   }; </script><style lang="stylus" rel="stylesheet/stylus">   @import "./common/stylus/mixin.styl";  .tab     display:flex     width:100%     height:40px     line-height:40px     border-1px(rgba(7,17,27,0.1))     .tab-item       flex:1       text-align:center       & > a         display:block         font-weight:700         text-decoration:none         font-size:14px         color:rgb(77,85,93)         &.active           color:yellow </style>

import Vue from 'vue'; import VueRouter from 'vue-router'; import VueResource from 'vue-resource'; //引入自定義的組件import Goods from '@/components/goods/goods'; import Ratings from '@/components/ratings/ratings'; import Seller from '@/components/seller/seller';Vue.use(VueRouter); Vue.use(VueResource);const routers = [{   path:'/goods/goods',   name:'goods',   component:Goods },{   path:'/ratings/ratings',   name:'ratings',   component:Ratings },{   path:'/seller/seller',   name:'seller',   component:Seller }];const router =new VueRouter({   mode:'history', //如果不配置 mode，就會使用默認的 hash 模式，該模式下會將路徑格式化為 #! 開頭。   routes:routers,   linkActiveClass : 'active' // 設置 鏈接激活時使用的 CSS 類名,默認值: "router-link-active" }); export default router;