网站到期如何续费,青海省住房城乡建设厅网站首页,无锡网站建设推荐,wordpress如何添加注册登录界面一、效果
直接进入home页面#xff0c;直接展开对应的菜单项 二、具体实现
1、菜单容器增加默认选中变量
在菜单容器中将默认展开菜单default-openeds修改为默认选中菜单default-active 2、引入useRoute方法
引入该方法为了获取当前页面的路径
import { useRoute } from …一、效果
直接进入home页面直接展开对应的菜单项 二、具体实现
1、菜单容器增加默认选中变量
在菜单容器中将默认展开菜单default-openeds修改为默认选中菜单default-active 2、引入useRoute方法
引入该方法为了获取当前页面的路径
import { useRoute } from vue-router
3、获取当页面路径选中菜单项变量设置
通过route获取到路径信息然后将其赋值给默认选中菜单项
//获取当前页面路径
const route useRoute();
const currentPath route.path;
const activeMenu ref(currentPath);
三、完整代码
templateel-container classlayout-container-demo styleheight: 100vhel-aside width200pxel-scrollbar!-- default-openeds:默认展开菜单 --!-- default-active:默认选中菜单 --el-menu :default-activeactiveMenu :routertrue!-- 遍历一级菜单 --template v-for(item, index) in menu :keyindex!-- 如果一级菜单有子菜单渲染 el-sub-menu --el-sub-menu v-ifitem.children item.children.length 0 :index${index 1}template #titleel-icon v-ifitem.iconcomponent :isitem.icon //el-icon{{ item.name }}/template!-- 遍历二级菜单 --el-menu-item v-for(secondmenu, secondindex) in item.children :keysecondindex:indexsecondmenu.path{{ secondmenu.name }}/el-menu-item/el-sub-menu!-- 如果一级菜单没有子菜单渲染 el-menu-item --el-menu-item v-else :indexitem.pathel-icon v-ifitem.iconcomponent :isitem.icon //el-icon{{ item.name }}/el-menu-item/template/el-menu/el-scrollbar/el-asideel-containerel-header styletext-align: right; font-size: 12pxdiv classtoolbarel-dropdownel-icon stylemargin-right: 8px; margin-top: 1pxsetting //el-icontemplate #dropdownel-dropdown-menuel-dropdown-itemView/el-dropdown-itemel-dropdown-itemAdd/el-dropdown-itemel-dropdown-itemDelete/el-dropdown-item/el-dropdown-menu/template/el-dropdownspanTom/span/div/el-header!-- 右侧内容 --el-mainel-scrollbarRouterView //el-scrollbar/el-main!-- 底部信息 --el-footer classflex flex-centerspan2025-2030 wen/span/el-footer/el-container/el-container
/templatescript setup
import { ref,reactive } from vue
import { useRoute } from vue-router//获取当前页面路径
const route useRoute();
const currentPath route.path;
const activeMenu ref(currentPath);// 菜单
const menu reactive([{name: Navigator One,icon: message,path: /about,},{name: Navigator Two,icon: message,children: [{name: Option 1,path: /home,},{name: Option 2,},{name: Option 3,},{name: Option 4,},]},
]);/scriptstyle scoped
.layout-container-demo .el-header {position: relative;background-color: var(--el-color-primary-light-7);color: var(--el-text-color-primary);
}.layout-container-demo .el-aside {color: var(--el-text-color-primary);background: var(--el-color-primary-light-8);
}.layout-container-demo .el-menu {border-right: none;
}.layout-container-demo .el-main {padding: 0;
}.layout-container-demo .toolbar {display: inline-flex;align-items: center;justify-content: center;height: 100%;right: 20px;
}
/style
