vue3.2 菜单, 路由跳转, elementplus

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')