1.在画面中添加子画面,使用el-menu菜单进行跳转,只更新子画面 a.首先在配置 router 路径的 js 文件中配置画面的路径,子画面的路径要在父画面的 children 下面 在父节点下设置redirect属性,打开父画面时会默认打开相应子画面,否则子画面默认显示为空白 b.在画面显示区域添加router-view标签 c.在菜单栏的 el-menu ...
简介:Vue3 的后台管理的项目想要做个菜单的话,一般会使用 VueRouter 设置路由,然后用UI库的菜单组件(比如 el-menu)设置各种属性,然后还需要考虑权限等问题。 Vue3 的后台管理的项目想要做个菜单的话,一般会使用 VueRouter 设置路由,然后用UI库的菜单组件(比如 el-menu)设置各种属性,然后还需要考虑权限等问题。
<el-container> <el-aside style="width: 200px"> <el-row class="tac"> <el-col :span="12"> <el-menu :router=true default-active="home" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" > <template v-for="menu in menuList"> <el-sub-menu v-if="menu.childr...
/el-menu> </el-aside> <el-container> <el-header>Header</el-header> <el-main> <router-view></router-view> </el-main> </el-container> </el-container> </template> <script setup> import { ...
<el-menu-item v-else :key="item.path">{{ item.name }}</el-menu-item> </template> </el-menu> </template> <script> export default { computed: { menuItems () { const permissions = this.$store.state.user.permissions const allowedRoutes = this.$router.options.routes.filter(route =>...
el-menu 组件有个router属性,将其设置为 true 后,点击菜单项,vue 路由就会自动变成 el-menu-item 组件中 index 属性指向的内容,并且该菜单项也会高亮显示 如果点击浏览器的刷新按钮,el-menu 通常会不再高亮显示当前打开的路由页面。 当然,如果 el-menu 指定了default-active属性,则刷新页面后,无论实际路由是什...
│ SecondMenu-A-1 │ │ ├─────────────────────┤ │ │ ThirdMenuItem1-A-1 │ │ ├─────────────────────┤ │ │ ThirdMenuItem2-A-1 │ │ ├─────────────────────┤ Main Content Area │ ...
新建src/router/components.ts // src/router/components.ts import home from '@/views/home.vue'; import page1 from '@/views/menu/page-1.vue'; import page2 from '@/views/menu/page-2.vue'; export default { home, page1, page2,
单tab 参考 Router 的 router-view 封装一个组件 nf-router-view: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <component:is="$router.getComponent()"></component> 直接使用 component 加载组件即可。 动态多tabs 基于 el-tabs 封装一个动态多tabs组件 nf-router-view-tabs: ...
class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen" @close="handleClose" > <el-sub-menu index="1"> <template #title> <el-icon><location /></el-icon> <span>Navigator One</span> </template> <el-menu-item-group> ...