vue学习笔记---tap切换配置(vue-router)
商品评论商家(main.js里面的配置)import Vue from ‘vue’import App from ‘./App’import goods from ‘components/goods/goods’import
·
商品
评论
商家
(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>
更多推荐
已为社区贡献6条内容
所有评论(0)