vue2.0 router-view解决办法以及自定义v-header

main.js配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

app.vue 配置

<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>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import VHeader from '@/components/header/header.vue'
  export default {
    name: 'app',
    components:{
      VHeader
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">

  .tab
    display: flex
    width: 100%
    height: 40px
    line-height :40px
    .tab-item
      flex :1px
      text-align :center
      & > a
        display: block
        font-size 14px
        color #4d555d
        &.router-link-active
          color #f01414

</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods/goods.vue'
import Main 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:'*',
      redirect:'/goods'
    },
    {
      path: '/goods',
      name: 'goods',
      component: goods
    },
    {
      path: '/ratings',
      name: 'ratings',
      component: ratings
    },
    {
      path: '/seller',
      name: 'seller',
      component: seller
    }
  ]
})