到此Router路由在Vue3项目中的引入完成,可以在route目录下的index.js文件中对路由进行编辑了。 2.Element Plus框架引入 在项目的根目录下打开cmd,然后输入: npm install element-plus--save 控制台输入如下: 然后我们打开项目src目录下的main.js文件,加入代码: importElementPlusfrom'element-plus';import'element-pl...
分析:我们用addRoutes添加了新路由,却并不能直接删掉已添加的路由,退出->跳到登录页本质上也是一次普通的页面跳转,之前登录用户生成的路由配置并没有被清除/替换,router.addRoutes()没用,router.options.routes=XXX也不好使,你会去查vue-router的API想看有没有删除/重置/替换路由的办法,结果只能吐槽一句这个简单到令...
新建src/util/menu.ts,内容如下,用来生成菜单和路由数据。 import menus from "@/data/menu" import { RouteRecordRaw } from "vue-router" const views = import.meta.glob('@/views/**/*.vue') export const gen = (userType: number): [IMenu[], RouteRecordRaw[]] => { return gen2(userType...
1. 第一步:首先改写VUE中的模板,修改sidebarMenu.vue文件,文件具体目录建下图: 将Menu导航菜单组件的的二级嵌套结构改为三级嵌套,无非就是判断二级路由页面下是否有children属性及是否含有子元素,有的话直接v-for循环生成子元素标签,新结构如下: <template> <Menu ref="sideMenu" :active-name="$" :open-names=...
// 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, }; 新建文件src/router/index.ts ...
先上流程图,有更好的方案欢迎提出 动态路由菜单流程图 检查登录过期并不是必须的,这里只是演示作用,如果后端有做的话,在请求拦截器里面判断更好 // index.tsconstrouter=createRouter({// import.meta.env.BASE_URL 通过vite.config的base设置,默认为‘/’history:createWebHistory(import.meta.env.BASE_URL),rou...
el-menu 组件有个router属性,将其设置为 true 后,点击菜单项,vue 路由就会自动变成 el-menu-item 组件中 index 属性指向的内容,并且该菜单项也会高亮显示 如果点击浏览器的刷新按钮,el-menu 通常会不再高亮显示当前打开的路由页面。 当然,如果 el-menu 指定了default-active属性,则刷新页面后,无论实际路由是什...
use(router); app.mount("#app"); 在HelloWorld.vue中添加一个按钮 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <div class="hello"> <el-button>默认按钮</el-button> ...其他代码 </div> 然后运行项目, 结果如图 这样vue3和element-plus就都安装好了。 其他 修复问题 安装element-plus的时候提...
vue3.x+element-plus 实现动态路由菜单功能 废话不多说直接上代码: 首先一般的后台管理都是有登录页面的 我们在登陆页面实现 具体的 接口调用 获取 动态菜单和权限 这里我们就简单mock一下 上代码: vue3.x-admin\src\mock\menu.json [ { "path": "/home",...
使用vue3,element-plus 动态路由菜单 要使用Vue3和Element-Plus动态路由菜单,您需要遵循以下步骤: 1. 安装Vue3和Element-Plus依赖项。可以在CLI中使用以下命令安装: npm install vue@next npm install element-plus 2. 在您的Vue3项目中配置路由。您可以使用Vue Router或其他兼容的库。在路由配置中,您需要指定...