} }<template>// 必须加上router-view,否则会显示空白页面<router-view></router-view></template> main.js: import'./assets/main.css'importAppfrom'./App.vue'import{ createApp }from'vue'importrouterfrom'./router'importElementUIfrom'element-plus'import'element-plus/theme-chalk/index.css'constapp ...
npm run serve 进行验证,如果启动页面弹出,如下图示: 既是安装成功。 二、集成element-plus cd到新建项目的根目录,如下图: 1、安装Element+ 使用如下指令: npm install element-plus --save 此时你的项目可能会报错,如下图示: 不要着急,这是因为刚刚安装插件版本与Vue不符造成的;解决此问题,可分为如下三个步骤...
紧接着store的login方法结束之后回到index.vue的登录方法,然后开始路由跳转。路由跳转也添加了拦截,在该拦截里,会根据缓存中的token去判断,如果有token且路由是/login,直接放行,如果没有token,在白名单里直接跳,不在白名单里调到登录页,如果有token且不是/login则去store里获得角色信息 回到路由拦截的permission.js文...
这里el-menu添加router属性的意思就是让我们的菜单点击的时候启用路由功能,el-menu-item的index属性配置要和我们的路由的path一一对应 再一方面就是我们的主内容区域要添加路由视图,这样路由切换的时候页面会显示在这个区域里 <el-mainclass="content"><!-- 放置表格 --><router-view/></el-main> 4 首页的完整...
import {ElMessage} from"element-plus"; import {apiOrderList} from"@/api/api"; import { useRouter} from"vue-router"; exportdefault{ name:"OrderList", setup() {//console.log();const tableData=ref([]); const page=ref(0); const pagesize=ref(0); ...
简介:vue3+elementplus后台管理系统,实现侧边栏菜单显示到主内容区域 我们已经使用vue3和elmentplus初步搭建了首页,上一篇中有个问题没解决,就是在侧边栏导航功能里,如果点击菜单希望是在首页打开页面而不是跳转到新页面。以下是我们希望实现的效果 这样的好处是用户在切换菜单的时候不需要离开当前页面,方便操作。本篇...
开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中。 记:在Vue3中使用Element-Plus分页组件与表格数据实现分页交互。 开始实现 引入表格和分页组件的H5标签。 Element-Plus分页组件使用 <el-table :data="tableData" style="width: 100%"> <el-table-column prop="...
登录的时候将id及验证码传入即可获得token,然后跳转至首页即可 constformLogin = reactive<LoginVo>({ username:'', password:'', id:'', captcha:'', }); constloginRules = reactive({ username: [{required:true,message:'用户名不可为空',trigger:'blur'}], ...
vue3.x+element-plus 实现动态路由菜单功能 废话不多说直接上代码: 首先一般的后台管理都是有登录页面的 我们在登陆页面实现 具体的 接口调用 获取 动态菜单和权限 这里我们就简单mock一下 上代码: vue3.x-admin\src\mock\menu.json [ { "path": "/home",...