换一批能刷新和点击事件跳指定页面路径

静态布局 设计图是9个点 后续考虑接口问题 返回的数据数字值从0开始

（所以这边我把图片的盒子名称从0开始命名 方便后续index下标好对应上）

将数字替换index

这边我是把设计图 换一批 图标通过svg替代 因为vant没得 效果不影响

图片 再进行定位调好位置 自行慢慢调 （照抄出错）

.lea_0{
    position: absolute;
    left: 40px;
    top: 240px;
    height: 40px;
       img{
           width: 12px;
           height: 12px;
           position: absolute;
           left: 50%;
           bottom: -20%;
           transform: translate(-50%,-50%);
        }
   }

定位完成 页面图片和字就搞定了 再调用方法内容 动态设置 根据接口进行内容渲染到页面 setCulture 方法是个啥 下面参考

---

上面第一步静态搞定 现在是动态了

第一步我们从点击换一批刷新事件下手

这边用的接口调用 一开始出错了 我没有做分页也就是page++ 所以每次刷新都是这个页面（下面参考）

把接口内容给定义的空数组去

避免页面内容不变这个错误问题就需要进行个page+1  这样就能保证 只要是触发事件 你的当前页就会换
同时还需要进行个重置 每次触发就能保证在切换内容 其实原理是重复的

其次就是 页面中9个点的内容问题 我是通过三层过滤 才能保证每次内容不一样

这边需要将vuex返回的数据 和 接口的数据进行对比 再对比 code是他们的数字相对于id

调用vuex数据 和接口数据 操作

这边操作完再把 res 的值 也就是过滤后的相同值进行一个赋值

最后就是看不到页面内容 我通过侦听器 watch 进行的页面内容显示

将最后相同的数据方法调用 放types定义的空数组中 这样就能保证内容不重复

---

最后优化 将页面中的9个点 进行点击事件 将item放进去 后面跳转需要进行数字对比 才能看到点击谁到谁哪里

我通过query进行的路由传参

当然你也需要在跳转页面那边进行接受一下 在跳转那边页面 create钩子调用函数

一开始是想的上面无绑定的tab里面的name属性 所以用的方法

这样就实现了点击你的9个点的字就跳去相对应的页面tab名字