vue의 간략한 맛
머리말:
루프 처리를 위한 커스텀 폼 객체에 대한 정보를 인터넷에서 많이 찾았는데, 뭐라고 쓰여 있는지 헷갈렸는데, 결국 컴포넌트를 직접 수정해서 개선하고, v-for for 루프 바인딩을 직접 사용해 구현했습니다. . 이 예제에서는 메뉴를 가리키고 라우팅 점프를 수행하기 위해 사용자 정의 메뉴 표시줄과 vue-router 라우팅을 구현합니다. 이는 주로 el-menu 구성 요소에 의해 구현됩니다.
라우팅 점프를 위한 경로로 사용자 정의 개체를 구성해야 합니다.
이 예제 프로젝트 구조는 다음과 같습니다.
아이디어:
주요 목적은 app.vue에서 컨테이너 프레임워크의 구성을 구현하고 컨테이너에서 페이지 점프를 구현하여 사용자 정의된 컴포넌트를 찾는 것입니다. 이 위치에 제가 배치한 전체 컴포넌트는 menutree.vue이고 <router-view /> 이 컴포넌트에서는 경로가 점프해야 할 때 컴포넌트를 직접 배치하고 수정합니다.
키 포인트:
주로 메뉴바 점프를 해결하는 링크는 다음과 같습니다.
1. 경로 점프를 구현하려면 먼저 el-menu 태그에 라우터 속성을 추가한 다음 각 el-menu-item 태그의 index 속성에 url을 설정하여 el-menu-item을 클릭하여 경로 점프를 구현합니다. 변화.
2. 현재 항목을 탐색하여 el-menu 태그(default-active="$route.path")에 바인딩합니다. 바인딩 속성이라는 점에 유의하세요. 추가하는 것을 잊지 마세요.
코드:
vue+elementui 프로젝트 el-menu 탐색 모음은 라우팅 점프 및 현재 item_elementui 메뉴 설정을 구현합니다. Routing_Blog 북극과 남극 사이-CSDN 블로그
<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>