vue3 Elementplus 动态路由菜单不跳转问题

最新推荐文章于 2024-07-04 00:59:27 发布
最新推荐文章于 2024-07-04 00:59:27 发布
阅读量560 收藏
点赞数 7
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51355375/article/details/139898600
版权

问题描述

vue3 Elementplus 使用component: () => import(@/views/${item.componentPath}.vue)加载动态路由菜单不跳转, 报错
Unknown variable dynamic import: …/views/system/user/index.vue at dynamic-import-helper.js:7:96

解决

使用

使用     let modules = import.meta.glob('../views/**/*.vue')   先导入，再用modules加载

 component: modules[`../views/${item.componentPath}.vue`]
不知所云,
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 动态添加路由及生成菜单的方法示例
12-12
写后台管理系统，估计有不少人遇过这样的需求：根据后台数据动态添加路由和菜单。 为什么这么做呢？因为不同的用户有不同的权限，能访问的页面是不一样的。 在网上找了好多资料，终于想到了解决办法。 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍： router.addRoutes router.addRoutes(routes: Array) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 举个例子： const router = new Router({ routes: [
VUE3浅析---动态路由
qq_22610595的博客
03-16 4137
VUE3项目实现动态路由demo。
【Vue3】Typescript 路由跳转失败：导航栏地址改变页面不切换
weixin_45274678的博客
04-27 319
出现这类问题的都是在div标签上添加@click事件，进行跳转。router-view 添加key标识。页面不切换可能是没有使用。
vue3.2 菜单, 路由跳转, elementplus
grow_的博客
02-24 2840
1.属性加上router index是路由的跳转地址 2.<router-view/>显示路由跳转的页面， unique-opened属性--------之保持一个子菜单的展开 3.菜单的默认选中 menu中 ：default-active="defaultActive" js中：const defaultActive=ref('/users') 有问题：只有菜单默认选中，而对应的，而<router-view />不对应 修改： 菜单选项上： @click=...
vue3.x+element-plus 实现动态路由菜单功能
zg_1234567的博客
03-09 8877
vue3.x+element-plus 实现动态路由菜单功能
Vue3 or: Unknown variable dynamic import: ../views/的解决方案
qq_53679247的博客
04-19 4630
这样的写法在Vue2中是可以正常运行的但是在Vue3中就不可以了的。
【Vue】Router路由无法跳转问题整理
热门推荐
Sheldon74的博客
09-08 1万+
Vue Router路由无效或异常等问题整理
Vue3路由发生跳转，界面没有跳转的一种原因
weixin_51470941的博客
03-26 944
Vue3路由发生跳转，界面没有跳转的一种原因
【vite + vue3】线上页面停留一段时间，点击菜单，页面不跳转
m0_65041204的博客
01-05 2363
项目在本地开发没问题，但是打包到测试环境时发现：页面无操作停留一段时间后，页面跳转失效，查看控制台报错；刷新后正常
vue3.0+element-plus实现国际化语言，动态路由菜单demo
01-27
在本项目中，"vue3.0+element-plus实现国际化语言，动态路由菜单demo"，开发者采用最新的Vue.js 3.0框架与Element Plus UI库，构建了一个具有国际化功能和动态路由菜单的示例应用。这个项目对于学习Vue 3的新特性...
vue 解决addRoutes动态添加路由后刷新失效问题
08-27
Vue 中解决 addRoutes 动态添加路由后刷新失效问题 在 Vue 项目中，我们经常需要使用 addRoutes 动态添加路由，但是在刷新页面后，这些动态添加的路由就会失效。下面我们来介绍如何解决这个问题。 应用场景 在...
基于vue3.0 + elementPlus 实现的后台管理系统模板 动态路由 动态菜单 皮肤切换 登录逻辑.zip
01-03
这个“基于vue3.0 + elementPlus 实现的后台管理系统模板”旨在帮助开发者快速搭建具备动态路由、动态菜单、皮肤切换和登录逻辑等功能的管理界面。 首先，动态路由（Dynamic Routing）是现代Web应用中常见的一种...
vue3+elementPlus后台管理系统
08-19
Vue3 + ElementPlus 后台管理系统是一个基于Vue.js最新版本（Vue3）和ElementPlus UI库构建的高效、易用的后台管理平台。Vue3带来了许多改进和优化，包括Composition API、Suspense、Teleport等新特性，提升了开发...
创建一个vue3+vite+ts项目
m0_56885551的博客
06-29 498
新建一个vue3+vite+tsx项目
vue3插槽的使用
qq_47040462的博客
06-28 449
作用域插槽可以接收来自子组件的数据，使插槽内容能基于这些数据动态变化。默认插槽是最基本的形式，用于插入任何未明确命名的内容。通过合理使用插槽，你可以设计出高度可复用和灵活的组件。具名插槽允许你有选择性地插入内容到组件的特定位置。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1274
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
最新发布
weixin_63680330的博客
07-04 184
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Element中的日期时间选择器DateTimePicker和级联选择器Cascader
weixin_65793170的博客
07-01 381
一. 级联选择器，Cascader。二. 日期时间选择器，DateTimePicker
vue3 elementplus 动态菜单
05-01
Vue3和Element Plus是一对强力组合，能够提供丰富的功能和灵活的交互效果。其中，动态菜单是Element Plus很重要的一个特性，能够让用户自定义菜单，并且根据权限控制菜单的展示。下面将介绍如何在Vue3中使用Element Plus实现动态菜单。 首先，我们需要定义一份菜单数据，包括菜单的名称、路径、图标、权限等信息。可以使用Vue3中的Composition API来实现： ``` javascript import { ref } from 'vue' export default function useMenu() { const menus = ref([ {name: '首页', path: '/', icon: 'el-icon-s-home', roles: ['admin', 'user']}, {name: '设置', path: '/setting', icon: 'el-icon-setting', roles: ['admin']}, {name: '个人中心', path: '/profile', icon: 'el-icon-s-custom', roles: ['user']} ]); return { menus } } ``` 然后，在菜单组件中，我们可以使用v-for和el-menu组件来渲染菜单： ``` html <template> <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect"> <template v-for="menu in visibleMenus"> <template v-if="!menu.children"> <el-menu-item :key="menu.path" :index="menu.path"> <i :class="menu.icon"></i> <span>{{ menu.name }}</span> </el-menu-item> </template> <template v-else> <el-submenu :key="menu.path" :index="menu.path"> <template #title> <i :class="menu.icon"></i> <span>{{ menu.name }}</span> </template> <el-menu-item v-for="(childMenu, index) in menu.children" :key="childMenu.path" :index="childMenu.path"> <i :class="childMenu.icon"></i> <span>{{ childMenu.name }}</span> </el-menu-item> </el-submenu> </template> </template> </el-menu> </template> <script> import useMenu from '@/hooks/useMenu'; export default { setup() { const { menus } = useMenu(); const activeMenu = ref('/'); const visibleMenus = computed(() => { const userRoles = ['admin']; // 假设当前用户的角色为admin return menus.filter(menu => { return menu.roles.some(role => userRoles.includes(role)); }); }); function handleMenuSelect(index) { activeMenu.value = index; } return { activeMenu, visibleMenus, handleMenuSelect } } } </script> ``` 在上述代码中，我们使用computed属性过滤展示可见的菜单，并使用ref属性记录当前活跃的菜单。当菜单被选择时，我们更新活跃菜单的值，从而使当前选项突出显示。 最后，我们可以将菜单组件添加到Vue3的路由中，以便它能够随着路由的变化进行动态更新。 总的来说，Vue3和Element Plus能够轻松实现动态菜单，为用户提供更加灵活和可控的交互体验。亲身体验后，你会感到非常满意！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不知所云,

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值