1.在画面中添加子画面,使用el-menu菜单进行跳转,只更新子画面 a.首先在配置 router 路径的 js 文件中配置画面的路径,子画面的路径要在父画面的 children 下面 在父节点下设置redirect属性,打开父画面时会默认打开相应子画面,否则子画面默认显示为空白 b.在画面显示区域添加router-view标签 c.在菜单栏的 el-menu ...
{ item.name }} </el-menu-item> </el-menu> </template> <script> import { ref, onMounted } from 'vue'; import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); const menuItems = ref([ { path: '/', name:...
<el-menu class="menu-main" router :default-active="route.path" unique-opened background-color="#18214C" text-color="#fff"> <menuItem v-for="item in menuList" :item="item" :key="item.path" /> </el-menu> </el-scrollbar> </aside> </template> <script setup> import menuItem fr...
import{ useRouter }from"vue-router"; constopenedsArr = props.menuData.map((item) =>{ returnitem.path; }); constprops =defineProps({ menuData: { type:Array, default: [], }, }); constactiveMenu =computed(() =>{ constrouter =useRouter(); const{ meta, path } = router.currentRout...
Vue3使用递归组件封装El-Menu多级菜单 于2023-09-06 13:51:36 9760 文章被收录于专栏:前端开发随笔 代码语言:javascript 复制 <template><asideclass="menu"><el-scrollbar><el-menuclass="menu-main"router:default-active="route.path"unique-opened background-color="#18214C"text-color="#fff"><menu...
首先模仿 VueRouter 设置一个路由,这里简化一下,只考虑单层路由。然后再设置上菜单需要的属性。 因为要做二级菜单,所以再设置一个分组信息,另外再加上图标(icon)的设置,这样基本就够用了。 然后设置页面布局,根据设置绑定菜单(el-menu),加载组件即可。
简介:Vue3 的后台管理的项目想要做个菜单的话,一般会使用 VueRouter 设置路由,然后用UI库的菜单组件(比如 el-menu)设置各种属性,然后还需要考虑权限等问题。 Vue3 的后台管理的项目想要做个菜单的话,一般会使用 VueRouter 设置路由,然后用UI库的菜单组件(比如 el-menu)设置各种属性,然后还需要考虑权限等问题。
3、menu导航组件的页面 <divclass="layout-nav"><el-menu :default-active="$route.path" //默认展示的 class="el-menu-vertical-demo" :collapse="isCollapse1" router //路由模式 unique-opened ><divclass="logo-box"><imgsrc="../assets/img/guoerlogo.png"alt=""class="logo"/></div><template...
<el-tabs v-model="$router.currentRoute.key"type="border-card"><el-tab-pane label="桌面"name="home"><component:is="$router.home"></component></el-tab-pane><el-tab-pane v-for="key in $router.tabs":key="key":label="$router.menuList[key].title":name="key"><template #label><...