Vue项目中 点击某个选项后进入编辑页面,点击取消/保存/返回时 能够再次返回到点击的地方
简介:可以算是记忆功能,记忆上一次点击的地方
注意
:在做这个之前,要使用Vue的keepalive组件缓存功能,具体怎么用可以搜一下,很简单的
解析:
拿最简单的点击取消
来举例
首先我先说明一下,我这个页面时循环生成的多个div、
首先在循环的时候绑定一个id,这个id可以是你循环出来的后台数据,也可以是你自定义的数据。
注意:
不要使用数字开头
在点击按钮跳转的时候,通过路由,将此id传输过去,同时记得传输过去当前页面路由路径(便于返回)
我们再去看目标页面
假如当我们在目标页面修改完毕后,或者点击取消的时候,进行路由的跳转,
在这里有Vue基础的相信都能看懂,就不给大家多做解释了,简单点说,就是携带着点击来的id再次回到原先的页面。
重点!
回到原来的页面后,因为是从新加载页面,所以我们可以利用监听加载的数据来进行操作
在这里跟大家解释一下哈,首先判断是不是从上个页面操作完回来的页面,如果是,再次判断加载的数据,保证数据的有效性和可用性。随后,我们去页面上寻找循环出来的和参数id相匹配的div 判断如果div找到了的话,
利用getBoundingClientRect()获取这个div的位置集合,再在页面上找到父级盒子div(#container
),随后定位显示的位置( 代码中的-200,是因为我项目的需要,所以减去200,各位看官根据项目需求自己来定
),最后替换掉路径,清掉路由上的参数就可以了