vue-router 路由创建（饿了么app中tab创建）【vu

项目结构： 微信截图_20181204101247.png

App.vue:

<template>
  <div id="app">
    <div class="header">
      <header-a></header-a>
    </div>
    <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 HeaderA from './components/header/header.vue';
// 
export default {
  name: 'App',
  components: {HeaderA}
}
</script>

<style>

.tab{
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px
}
.tab-item {
  flex: 1;
  text-align: center
}
</style>

main.js:

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/>'
})

index.js:

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: [
//重定向 redirect
    {
      path:'/',
      redirect:'/goods'
     },
    {
     path:'/goods',
     name:'goods',
     component:goods
    },
    {
      path:'/seller',
      name:'seller',
      component:seller
     },
     {
      path:'/ratings',
      name:'ratings',
      component:ratings
     }
  ]
})

goods.vue，seller.vue，ratings.vue

<template>
  <div>商品/评价/商家</div>
</template>

<script>
export default {

}

</script>
<style>
</style>