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.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
    }
  ]
})