接着之前的菜单 优化一下我们的框架
菜单左边的图标大家去iconfont去下载代码 复制到icon文件夹 然后在main.js 导入进来 然后
在路由里面分别定义对应图片的类
循环填充就行了
一个管理后台 肯定是有退出修改密码之类的
上面分 两部分 左边的 element 里面的面包屑 和右边的下拉选项
我们在layout 的index.vue
右边的头部 抽取子类Nav 然后 import 导入进来 把代码和一些 逻辑交给Nav去处理了
左边的面包屑 我们用到的肯定是当前的路由信息了
watch: { $route: { handler: function(route) { console.log('route',route); const breadcrumbList = []; route.matched.forEach(rou=>{ breadcrumbList.push({ title:rou.meta.title, path:rou.path, }) }) this.breadcrumbList =breadcrumbList; } } },那么我们就监测路由变化 循环当前路由 把title 和 path 拿出来添加到我们的 breadcrumbList 然后在dom循环判断父类有title填充即可
但是大家肯定发现 刷新页面 就回到了默认的主页
这是以为 刷新路由并没有发生变化 所以 检测路由 里面的函数没有执行 那么 我们就在created 里面 获取路由 循环遍历给 面包屑的数组
这就解决了刷新回到主页的问题了
下面开始我们右边的下拉菜单了 我是从iconfont下载的一个图片引入进来的
按照element的代码 跳转的我们就添加相应的路径 然后是退出登录 添加退出登录函数
处理数据我们统一让vuex管理提交给
删除 token 搞定
最后我们在pemission.js里面 引入
然后在路由跳转钩子函数
配上我们的进度条 这样点击菜单就可以看到进度条的显示了
好了 到这里框架已经基本上完成了 下面就是根据后台接口去对相应的业务进行请求填充了 当然根据业务的需要是慢慢的更改优化我们的框架 项目是越写越好 但是不要一步求成 出错了也不要紧 根据提示慢慢的去更改
觉得可以的话 点个赞 后面我会继续去填充完善我们的项目
上一篇 https://blog.csdn.net/qq_38127637/article/details/109184853
下一篇
