一、目录结构,效果图。
二、main.js。是程序入口文件
import Vue from 'vue'
import App from './App'
import router from './router'
// 注册一个组件
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
三、index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '../components/goods.vue'
import lab from '../components/mylab.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/goods',
name: 'goods',
component: goods
},
{
path: '/lab',
component: lab
}
]
})
四、app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {}
}
</script>
<style>
</style>
五、mylab.vue
<template>
<div id="app">
<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>
</template>
<script>
export default {
name: 'mylab',
data () {
return {}
}
}
</script>
<style scoped>
.tab{
display: flex;
}
.tab-item{
flex: 1;
text-align: center;
}
</style>
六、goods.vue
<template>
<div>
<h1> 我是goods</h1>
<h1> 我是goods</h1>
</div>
</template>
<script>
export default {
name: 'goods',
data () {
return {}
}
}
</script>
<style scoped>
</style>