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 1.1K00 代码可运行 文章被收录于专栏:前端开发随笔 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <template><asideclass="menu"><el-scrollbar><el-menuclass="menu-main"router:default-active="route.path"unique-opened background-...
我们可以参考 vue-router 的设置 和 el-menu 的参数,设置一个适合我们需求的结构: ./router.js 代码语言:javascript 代码运行次数:0 运行 AI代码解释 import{createRouter}from'@naturefw/ui-elp'importhomefrom'../views/home.vue'constrouter={/** ...
menu.vue代码如下 <template> <div class="menu-container"> <el-scrollbar height="100%"> <el-menu ref="ElMenuRef" :collapse="false" :default-active="route.path" :router="false"> <MenuItem v-for="item,index in dataContainer.dataList" ...
我们可以参考 vue-router 的设置 和 el-menu 的参数,设置一个适合我们需求的结构: ./router.js import { createRouter } from '@naturefw/ui-elp' import home from '../views/home.vue' const router = { /** * 基础路径 */ baseUrl: baseUrl, ...
</el-menu> </el-col> </el-row> </template> <script setup> import { reactive, ref, onMounted, watch } from 'vue' import navApi from '@/api/navApi' import { useRouter } from 'vue-router' import { useStore } from 'vuex'; ...