微信截圖_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>
