美文网首页
电商平台 商品,详情 ,评价 运用主子路由三者切换

电商平台 商品,详情 ,评价 运用主子路由三者切换

作者: Sunshine_488c | 来源:发表于2020-03-06 16:36 被阅读0次

    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}

    },

    ]

    })

    相关文章

      网友评论

          本文标题:电商平台 商品,详情 ,评价 运用主子路由三者切换

          本文链接:https://www.haomeiwen.com/subject/vwcwrhtx.html