1.App.vue代码如下:
<template>
<div>
<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>
<router-view></router-view>
</div>
</template>
2.router文件下index.js如下:
import Vue from 'vue';
import Router from 'vue-router';
import goods from '@/components/goods/goods.vue';
import seller from '@/components/seller/seller.vue';
import ratings from '@/components/ratings/ratings.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/goods',
component: goods
},
{
path: '/seller',
component: seller
},
{
path: '/ratings',
component: ratings
},
{
path: '/*',
component: goods
}
]
});
3.main.js代码如下:
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
import router from './router';
Vue.use(VueRouter);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});
中文地址:https://router.vuejs.org/zh/