vue+ element 小白初次实践踩坑(一)-路由与location

el/2024/2/26 0:02:11

vue+ element 小白初次实践踩坑(一)-路由与location

1.需求:列表页跳转到详情页,但是详情页根据不同的路径进入,状态不同

2.分析:首先列表页会根据id不同跳到详情页,这个时候一个详情页就可以了。然后根据id可以拿到不同的数据;

第二版需求升级,要求加审核页面,审核列表也根据id进入详情页,但是这个时候的详情页与之前的详情页不同,不可以编辑,只能查看审核。同时团队okr也要可以跳到详情页,也不可以编辑。所以,我们不能共用之前的页面,需要再写一个详情页,给审核详情和团队详情

3.路由:代码部分

            //okr{path: '/okr/my',name: 'MyOkr',meta: {title: '我的OKR',},component: () => import(/* webpackChunkName: "myokr" */ '../views/Okr/MyOkr.vue')},{path: '/okr/team',name: 'TeamOkr',meta: {title: '团队OKR',},component: () => import(/* webpackChunkName: "teamokr" */ '../views/Okr/TeamOkr.vue')},{//个人详情页path: '/okr/detail/:id',name: 'MyOkrDetail',meta: {keepAlive: true,title: '个人计划详情'},component: () => import(/* webpackChunkName: "myokrdetail" */ '../views/Okr/MyOkrDetail.vue'),children:[{//OKR列表path: 'list',name: 'OkrList',component: () => import(/* webpackChunkName: "OkrList" */ '../views/Okr/OkrList.vue'),meta: {title: 'OKR列表',},},{//OKR列表path: 'score',name: 'OkrScore',component: () => import(/* webpackChunkName: "OkrList" */ '../views/Okr/Score.vue'),meta: {title: '评分',},},{//操作日志path: 'log',name: 'OprLog',component: () => import(/* webpackChunkName: "OprLog" */ '../views/Okr/OprLog.vue'),meta: {title: '操作日志',},},]},{//部门详情path: 'okr/team/detail/:id',name: 'TeamOkrDetail',meta: {keepAlive: true,title: '团队计划详情'},component: () => import(/* webpackChunkName: "teamokrdetail" */ '../views/Okr/TeamOkrDetail.vue'),},{path: '/okr/team/sub/detail/:id',name: 'Sub',meta: {title:'团队个人计划详情',}</

http://www.ngui.cc/el/4893947.html

相关文章

vue+ element 小白初次实践踩坑(二)-数据刷新,页面没改变

vue+ element 小白初次实践踩坑(二)-数据刷新,页面没改变 在使用vue的时候一个页面会有多个组件构建,所以会发生数据刷新,但是页面上的变化不完全 1.第一种:一个页面可以跳转到另一个页面,但是两个页面是共用的,点击跳转之后,必须强刷浏览器,数据才会更新 解决: …

vue 小白初次实践踩坑(二)-路由与location

vue 小白初次实践踩坑(二)-路由与location 需求: 第一种:要求点击不同的导航跳转到另一个页面,在另一个页面上也有通用的导航,刚刚点击的那个导航应该处于选中状态(高亮) <template><div><ul class="header-menu" ref="MainHeader&qu…

vue + element 新手指引

直接上代码 template-(Guide.vue) <template><div><!-- 新手指引 --><div id"mask"></div><div id"searchTip"><div class"stepA"><el-button type"primary" size"small" c…

vue+element 表头说明文字

vueelement 表头说明文字 第一种直接hover 表头出现说明文字 html&#xff1a; <el-table-column prop"last_result" label"上次评估结果" width"120" :render-header"renderHeader"></el-table-column>js: methods: …

jquery封装选人插件(结合layer)

html <button class="layui-btn" id="transfer">添加</button><!-- 选人弹窗主体框架 satrt--> <div class="layer-transfer" id="layer-transfer" style="display:none"><div class="lay…

element表格点击一行给行添加border

由于element ui有一套自己的样式&#xff0c;在实际工作中&#xff0c;我们可能不会照搬&#xff0c;一般会根据需求和设计对element ui进行调整&#xff0c;但是有时候自己写的样式会被element ui影响&#xff0c;不能成功应用。 这次我的工作就是给element表格点击一行给行添…

layui 布局 高度不一致时导致的错乱问题解决

这个问题找了很久&#xff0c;因为需求是要类似于瀑布流那样的布局&#xff0c;但是因为用的是layui所以又不想弃用&#xff0c;单独写&#xff0c;所以有了以下解决方案&#xff1a; html&#xff1a; <div class"layui-row list-body"><div class"…

超简单的jquery 点击文本复制文本

有点仿蓝湖的点击代码就复制的功能&#xff0c;直接点击你想复制的文本&#xff0c;就可以复制成功了 html: <ul class"info-list"><li><div class"info"><em>1</em><span class"link-addr"title"12333…

vue 不在同一处(不是同一个页面)的数据使用(数据传输)

vue 不在同一处&#xff08;不是同一个页面&#xff09;的数据使用&#xff08;数据传输&#xff09; 整理下最近在做vue项目时遇到的几个关于数据传输的问题&#xff1a; 有的时候我们在同一个页面想要调用不同的组件&#xff0c;不同的组件可能只是结构不太一样&#xff0c;…

vue + element(前后端) 学习总结(一)

准备工作 工具安装和环境搭建 ## node.js## npm## mongodb数据库 主要记录一下mongodb的安装和配置(mac版) ## 首先去mongodb的官网下载&#xff1a;[https://www.mongodb.com/download-center] ## 下载解压后重命名为mongodb,接着打开mongodb&#xff0c;在mongodb下新建一个…