vue学习笔记---tap切换配置（vue-router）

商品

评论

商家

（main.js里面的配置）
import Vue from ‘vue’
import App from ‘./App’
import goods from ‘components/goods/goods’
import ratings from ‘components/ratings/ratings’
import seller from ‘components/seller/seller’
import VueRouter from ‘vue-router’Vue.use(VueRouter)

Vue.use(VueRouter)//实例化vueRouter
// 将App.vue组件扩展接口给app，实际上就是将APP继承给app–>
let app = Vue.extend(App)
// 实例化路由，并且将点击链接后类名简写为active–>
let router = new VueRouter({
linkActiveClass: ‘active’
})
// 设置路由地图–>
router.map({
‘/’: {
component: goods
},
‘/goods’: {
component: goods
},
‘/ratings’: {
component: ratings
},
‘/seller’: {
component: seller
}
})
// 启动路由将 app组件挂到html#app下面–>
router.start(app, ‘#app’)

<template>
  <div>
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <a v-link="{path:'/goods'}">商品</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/ratings'}">评论</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/seller'}">商家</a>
      </div>
    </div>
    <router-view :seller="seller" keep-alive></router-view>
  </div>
</template>