电商平台 商品，详情 ，评价 运用主子路由三者切换
html
<!--商品 详情 评价 主路由-->
<template>
<div>
<!--商品 详情 评价 上面的头部部分-->
<div class='details-header'>
<div class='back' @click="$router.go(-1)"></div>
<!--商品 详情 评价-->
<div class='tab-wrap'>
<div :class="{'tab-name':true,active:itemActive}" @click="goPage('/goods/details?gid='+gid)">商品</div>
<div :class="{'tab-name':true,active:contentActive}" @click="goPage('/goods/details/content?gid='+gid)">详情</div>
<div :class="{'tab-name':true,active:reviewActive}" @click="goPage('/goods/details/review?gid='+gid)">评价</div>
</div>
<!--点击购物车，跳转到购物车页面-->
<div id="cart-icon" class='cart-icon' @click="goPage('/cart')">
<div class='spot'></div>
</div>
</div>
<div class="sub-page">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name:"details",
data(){
return {
itemActive:false,//商品
contentActive:true,//详情
reviewActive:false,//评价
gid:this.$route.query.gid?this.$route.query.gid:""
}
},
created(){
this.changeStyle(this.$route.path);
},
methods: {
goPage(url) {
this.$router.replace(url);
},
changeStyle(url){
switch (url) {
case "/goods/details/item":
this.itemActive=true;
this.contentActive=false;
this.reviewActive=false;
break;
case "/goods/details/content":
this.itemActive=false;
this.contentActive=true;
this.reviewActive=false;
break;
case "/goods/details/review":
this.itemActive=false;
this.contentActive=false;
this.reviewActive=true;
break;
default:
this.itemActive=true;
this.contentActive=false;
this.reviewActive=false;
}
}
},
beforeRouteUpdate(to,from,next){
this.changeStyle(to.path);
next()
}
}
</script>
<style scoped>
.details-header{width:100%;height:1rem;background-color:#FFFFFF;display:flex;display:-webkit-flex;align-items:center;-webkit-align-items:center;justify-content:space-between;-webkit-justify-content:space-between;position:fixed;z-index:10;left:0px;top:0px;}
.details-header .back{width:0.8rem;height:0.8rem;background-image:url('../../../assets/images/home/goods/back.png');background-repeat:no-repeat;background-position:center;background-size:100%;}
.details-header .tab-wrap{width:70%;height:100%;display:flex;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;}
.details-header .tab-wrap .tab-name{width:auto;height:96%;overflow:hidden;line-height:1rem;text-align:center;margin-left:9%;margin-right:9%;font-size:0.36rem;}
.details-header .tab-wrap .tab-name.active{border-bottom:solid 2px #FDA208;}
.details-header .cart-icon{width:0.8rem;height:0.8rem;background-image:url('../../../assets/images/home/goods/cart.png');background-repeat:no-repeat;background-position:center;background-size:100%;margin-right:0.2rem;position:relative;z-index:1;}
.details-header .cart-icon .spot{width:0.2rem;height:0.2rem;background-color:#CC0004;border-radius:100%;position:absolute;z-index:1;right:0px;top:0.15rem;}
.sub-page{width:100%;}
</style>
router.js
import Vuefrom 'vue';
import Routerfrom 'vue-router';
Vue.use(Router);
import IndexPagefrom './pages/home/main/index'
import HomeIndexfrom './pages/home/index/index'
import cartIndexfrom './pages/home/cart/index'
import myIndexfrom './pages/user/my/index'
import loginPagefrom './pages/home/login/index'
import regPagefrom './pages/home/reg/index'
import classifyIndexfrom './pages/home/goods/classify'
import classifyItemfrom './pages/home/goods/classify_item'
import goodsDetailsfrom './pages/home/goods/details'
import goodsDetailsItemfrom './pages/home/goods/details_item'
export default new Router({
mode:"hash",//1、hash哈希：有#号。2、history历史：没有#号
base:process.env.BASE_URL,//自动获取根目录路径
routes:[
{
path:"/",
name:"home",
component:IndexPage,
redirect:"index",
children:[
{
path:"index",
name:"index",
component:HomeIndex,
meta:{keepAlive:true,title:"首页"}
},
{
path:"cart",
name:"cart",
component:cartIndex,
meta:{keepAlive:false,title:"购物车"}
},
{
path:"my",
name:"my",
component:myIndex,
meta:{keepAlive:false,auth:false,title:"我的"}
},
{
path:"goods/classify",
name:"classify",
component:classifyIndex,
meta:{title:"商品分类",keepAlive:false},
redirect:"/goods/classify/item",
children: [
{
path:"item",
name:"classify_item",
component:classifyItem,
meta:{title:"商品分类",keepAlive:false},
}
]
},
{
path:"goods/details",
name:"goods_details",
component:goodsDetails,
meta:{title:"商品详情",keepAlive:false},
redirect:"/goods/details/item",
children:[
{
path:"item",
name:"item",
component:goodsDetailsItem,
},
{
path:"content",
name:"content",
component:()=>import("./pages/home/goods/details_content")
},
{
path:"review",
name:"review",
component:()=>import("./pages/home/goods/details_review")
}
]
}
]
},
{
path:"/login",
name:"login",
component:loginPage,
meta:{keepAlive:true}
},
{
path:"/reg",
name:"reg",
component:regPage,
meta:{keepAlive:false}
},
]
})
