You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.3 KiB
98 lines
2.3 KiB
<template>
|
|
<div class="bg">
|
|
<div class="left-container">
|
|
|
|
<router-link :class="['route-item',selectIndex==i?'active':'']" v-for="(item,i) in navList" :key="i" :to="item.path">{{ item.title }}</router-link>
|
|
|
|
</div>
|
|
<div class="right-container">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectIndex: 0,
|
|
navList: [
|
|
{title: "个人中心",path:"/User/UserCenter"},
|
|
{title: '我的购物车',path:"/User/ShoppingCart" },
|
|
{title: '我的订单',path:"/User/OrderList" },
|
|
{title: '评价管理',path:"/User/CommentManage" },
|
|
{title: '我的发票',path:"/User/UserInvoiceList" },
|
|
{title: '发票抬头',path:"/User/UserInvoice" },
|
|
{title: '合同管理',path:"/User/ContractList" },
|
|
|
|
|
|
// {title: '我的收藏' ,path:""},
|
|
{title: '我的足迹',path:"/User/ViewHistory" },
|
|
{title: '消息中心',path:"/User/MessageList" },
|
|
{title: '个人信息',path:"/User/UserInfo" },
|
|
{title: '采购人信息',path:"/User/PurchaserAdd" },
|
|
{title: '我的收货地址',path:"/User/UserAddress" }
|
|
]
|
|
}
|
|
},
|
|
watch: {
|
|
// 监听 $route 对象的变化
|
|
$route(to, from) {
|
|
let toPath = to.path.toLocaleLowerCase()
|
|
let index = this.navList.findIndex(x=>x.path.toLocaleLowerCase()== toPath)
|
|
if (index>=0) {
|
|
this.selectIndex = index
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
|
|
},
|
|
created() {
|
|
let path = this.$route.path.toLocaleLowerCase()
|
|
let index = this.navList.findIndex(x=>x.path.toLocaleLowerCase()== path)
|
|
if (index>=0) {
|
|
this.selectIndex = index
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg{
|
|
display: flex;
|
|
}
|
|
.left-container{
|
|
width: 150px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: fit-content;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
.route-item{
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
&:hover{
|
|
background-color: #f9f9f9;
|
|
}
|
|
&.active{
|
|
background-color: #6a8a27;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.right-container{
|
|
flex: 1;
|
|
width: 1px;
|
|
padding-left: 20px;
|
|
}
|
|
</style>
|
|
|
|
|