vue3.2 菜单, 路由跳转, elementplus
1.属性加上router index是路由的跳转地址2.<router-view/>显示路由跳转的页面, unique-opened属性--------之保持一个子菜单的展开3.菜单的默认选中menu中 :default-active="defaultActive"js中:const defaultActive=ref('/users')有问题:只有菜单默认选中,而对应的,而<r
·
1.属性加上router index是路由的跳转地址
2.<router-view/>显示路由跳转的页面, unique-opened属性--------之保持一个子菜单的展开
3.菜单的默认选中
menu中 :default-active="defaultActive"
js中:const defaultActive=ref('/users') 有问题:只有菜单默认选中,而对应的,而<router-view />不对应
修改:
菜单选项上: @click="savePath(it.path)"
js中:const savepath=(path)=>{
sessionStorage.setItem('path',`/${path}`)
}
const defaultActive=ref(sessionStorage.getItem('path') || '/users')
4.menu中 active-text-color="#fffd04b" 点中菜单某选项的颜色
5.小图标(转换组件使用)
1.安装elementplus中的图标
npm install @element-plus/icons-vue
2.main.js引用
import * as ELIcons from '@element-plus/icons-vue'
// 小图标引用
for (const iconName in ELIcons) {
// 注册组件
app.component(iconName, ELIcons[iconName])
}
3.页面使用
页面
<el-sub-menu :index="item.id" v-for="(item, index) in list" :key="item.id">
<template #title>
<el-icon>
<component :is="iconList[index]"></component>
</el-icon>
<span>{{ item.authName }}</span>
</template>
<el-menu-item
:index="'/' + it.path"
v-for="it in item.children"
:key="it.id"
@click="savePath(it.path)"
>
<template #title>
<el-icon>
<component :is="icon"></component>
</el-icon>
<span>{{ it.authName }}</span>
</template>
</el-menu-item>
</el-sub-menu>
js
// 一级图标
const iconList = ref(['user', 'setting', 'shop', 'tickets', 'pie-chart'])
// 二级图标
const icon = ref('menu')
更多推荐
已为社区贡献3条内容
所有评论(0)