Una breve muestra de vue
Prefacio:
Encontré mucha información en Internet sobre objetos de formulario personalizados para el procesamiento de bucles. Lo que estaba escrito me confundió. Al final, modifiqué directamente el componente para mejorarlo y utilicé directamente v-for para el enlace de bucle para implementarlo. . Este ejemplo implementa una barra de menú personalizada y un enrutamiento vue-router para apuntar al menú y realizar saltos de enrutamiento, que se implementa principalmente mediante el componente el-menu.
Los objetos personalizados deben configurarse con rutas para enrutar saltos.
Esta estructura de proyecto de ejemplo:
Idea:
El objetivo principal es implementar la construcción del marco del contenedor en app.vue e implementar saltos de página en el contenedor para ubicar los componentes personalizados. El componente total que coloqué en esta ubicación es menutree.vue y puse <router-view /> En este componente, cuando es necesario saltar la ruta, el componente se posiciona y modifica directamente.
Puntos clave:
Aquí está el enlace que soluciona principalmente el salto de la barra de menú.
1. Para implementar el salto de ruta, primero agregue el atributo del enrutador a la etiqueta el-menu y luego simplemente configure la URL en el atributo de índice en cada etiqueta el-menu-item para hacer clic en el-menu-item para realizar el salto de ruta. cambiar.
2. Navegue por el elemento actual y vincúlelo en la etiqueta el-menu: default-active="$route.path". Tenga en cuenta que es un atributo vinculante. No olvide agregar
Código:
la barra de navegación del menú el del proyecto vue+elementui implementa el salto de enrutamiento y la configuración del menú item_elementui actual route_Blog entre el Polo Norte y el Polo Sur-CSDN Blog
<template>
<el-container style="height: 1000px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu
router
:default-active="$route.path"
:default-openeds="['1', '3']" v-for="(item,index) in menuList" :key="index">
<el-sub-menu index="{
{item.id}}">
<template #title><i class="el-icon-message"></i>{
{item.name}}</template>
<el-menu-item-group :title="item.name">
<el-menu-item v-for="(val,index1) in item.childs" :key="index1" :index="val.path">{
{val.name}}</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px height=100px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<template #dropdown>
</template>
</el-dropdown>
</el-header>
<el-container class="fonter-page">
<menutree/>
</el-container>
</el-container>
</el-container>
</template>
<script>
import MenuTree from './components/MenuTree.vue'
export default {
name: 'App',
components:{
menutree:MenuTree
},
data(){
return {
menuList:[
{
id:1,
name:'数据概况',
childs:[
{
id:1,
name:'全局统计',
path:'/path/globalgeneral'
}
]
},
{
id:2,
name:'访问分析',
childs:[
{
id:1,
name:'用户趋势',
path:'/path/tendency'
}
]
},
{
id:3,
name:'用户质量',
childs:[
{
id:1,
name:'分析留存',
path:'/path/save'
}
]
},
{
id:4,
name:'用户画像',
childs:[
{
id:1,
name:'性别分析',
path:'/path/male'
},
{
id:2,
name:'年龄分析',
path:'/path/age'
}, {
id:3,
name:'地域分析',
path:'/path/area'
}, {
id:4,
name:'设备分析',
path:'/path/equipment'
},
]
},
]
}
}
}
</script>
<style>
html,body,#app{
height:100%;
margin: 0px;
padding: 0px;
}
.el-header {
background-color: #f8f8f6;
color: var(--el-text-color-primary);
line-height: 60px;
}
.el-aside {
color: var(--el-text-color-primary);
}
.fonter-page{
background-color: rgb(142, 169, 182);
height: 500px;
width: 800%;
padding-top: 200px;
}
</style>