到此Router路由在Vue3项目中的引入完成,可以在route目录下的index.js文件中对路由进行编辑了。 2.Element Plus框架引入 在项目的根目录下打开cmd,然后输入: npm install element-plus--save 控制台输入如下: 然后我们打开项目src目录下的main.js文件,加入代码: importElementPlusfrom'element-plus';import'element-pl...
在登录页面中,我们需要在用户登录成功后,初始化路由。通过后端返回的菜单数据,动态生成路由表,并将其挂载到Vue Router中。 // 初始化路由functioninitRouter(menus){constroutes=[];menus.forEach(menu=>{if(menu.type==='menu'){constroute={path:menu.path,name:menu.name,component:()=>import(`@/views/...
import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' let app = createApp(App) app.use(ElementPlus) app.use(router); app.mount('#app') /** * 项目得入口是main.js * 引入createApp,引入app.vue组件 * 在这个例子中,createApp(App) 创建了一个 Vue 应用实例,并将根组...
分析:我们用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...
// 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 ...
vue2 + element ui版:点击此处 1. 外层菜单组件: LeftMenu.vue <template> <el-menu :default-active="activeMenu" router :class="'menu-left'" :default-openeds="openedsArr" text-color="#fff" > <LeftSubMenu:menuData="menuData"></LeftSubMenu> ...
项目侧边栏主要基于element-plus的el-menu改造。 主要是有下面几个文件组成: Index.vue (主文件) SidebarItem.vue (侧边栏item定制,需要单独抽出来,多级路由嵌套需要它来递归) SidebarItemLink.vue (嵌套在SidebarItem 的上一层,区分外链和路由跳转) SidebarLogo.vue (侧边栏最上部的logo,可以隐藏和显示) ...
先上流程图,有更好的方案欢迎提出 动态路由菜单流程图 检查登录过期并不是必须的,这里只是演示作用,如果后端有做的话,在请求拦截器里面判断更好 // index.tsconstrouter=createRouter({// import.meta.env.BASE_URL 通过vite.config的base设置,默认为‘/’history:createWebHistory(import.meta.env.BASE_URL),rou...
vue3.x+element-plus 实现动态路由菜单功能 废话不多说直接上代码: 首先一般的后台管理都是有登录页面的 我们在登陆页面实现 具体的 接口调用 获取 动态菜单和权限 这里我们就简单mock一下 上代码: vue3.x-admin\src\mock\menu.json [ { "path": "/home",...