vuejs使用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="/seller">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/rating">商家</router-link>
      </div>
     </div>
    <router-view></router-view>
    </div>
</template>

<script>
  import header from './components/header/header';
  export default {
    components: {
      'v-header': header
    }
  };
</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
          color: darkgray
          font-size:20px
          text-decoration: none
          &.active
            color: firebrick
</style>

然后创建各个组件：

修改main.js