<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index">
<span class="no-redirect" v-if="index==breadcrumbList.length-1">{{item.name}}</span>
<span class="redirect" v-else @click="handleRedirect(item.path)">{{item.name}}</span>
</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script setup>
import {ref,watch} from 'vue'
import { useRoute,useRouter } from 'vue-router'
const route=useRoute();
const router=useRouter();
const breadcrumbList=ref([]);
const handleRedirect=(path)=>{
router.push(path)
}
const initBreadcrumbList=()=>{
console.log(route.matched)
breadcrumbList.value=route.matched;
}
watch(route,()=>{
initBreadcrumbList();
},{deep:true,immediate:true})
</script>
<style lang="scss" scoped>
.no-redirect{
cursor: text;
}
.redirect{
color:
font-weight: 600;
cursor: pointer;
&:hover{
color:
}
}
</style>
<template>
商品大类
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
<template>
后台管理首页
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
<template>
<div class="app-wrapper">
<el-container>
<el-aside width="200px" class="sidebar-container"><Menu/></el-aside>
<el-container>
<el-header>
<div class="navbar">
<Breadcrumb/>
</div>
</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
import Menu from '@/views/layout/menu'
import Breadcrumb from '@/views/layout/header/breadcrumb'
</script>
<style lang="scss" scoped>
.app-wrapper{
position: relative;
width: 100%;
height: 100%;
}
.navbar{
width: 100%;
height: 60px;
overflow: hidden;
background-color:
box-shadow: 0 1px 4px rgba(0,21,41,0.08);
padding: 0 16px;
display: flex;
align-items: center;
box-sizing: border-box;
position:relative;
}
:deep(.el-header){
padding: 0px;
}
.sidebar-container{
background-color:
height: 100%;
}
::v-deep .el-container{
height: 100%;
}
::v-deep ul.el-menu{
border-right-width: 0px;
}
</style>
<template>
<el-menu
active-text-color="#ffd04b"
background-color="#2d3a4b"
class="el-menu-vertical-demo"
default-active="home"
text-color="#fff"
router
>
<el-menu-item index="home">
<el-icon><home-filled /></el-icon>
<span>首页</span>
</el-menu-item>
<el-menu-item index="user">
<el-icon><user /></el-icon>
<span>用户管理</span>
</el-menu-item>
<el-sub-menu index="3">
<template
<el-icon><management /></el-icon>
<span>商品类别管理</span>
</template>
<el-menu-item index="bigType">
<el-icon><management /></el-icon>
<span>商品大类管理</span>
</el-menu-item>
<el-menu-item index="smallType">
<el-icon><management /></el-icon>
<span>商品小类管理</span>
</el-menu-item>
</el-sub-menu>
<el-menu-item index="product">
<el-icon><tickets /></el-icon>
<span>商品管理</span>
</el-menu-item>
<el-menu-item index="order">
<el-icon><tickets /></el-icon>
<span>订单管理</span>
</el-menu-item>
<el-sub-menu index="11">
<template
<el-icon><management /></el-icon>
<span>系统管理</span>
</template>
<el-menu-item index="modifyPassword">
<el-icon><edit /></el-icon>
<span>修改密码</span>
</el-menu-item>
<el-menu-item >
<el-icon @click="logout"><switch-button /></el-icon>
<span @click="logout">安全退出</span>
</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
<script setup>
import {HomeFilled,User,Tickets,Goods,DocumentAdd,Management,Setting,Edit,SwitchButton} from '@element-plus/icons-vue'
</script>
<style scoped>
</style>