Vue 3 关闭 tab 标签的逻辑写的怎么样?大家都是如何写的?

作者站长头像
站长
· 阅读数 17

Vue 3 关闭 tab 标签的逻辑写的怎么样?大家都是如何写的?

判断当前路由数量是否大于 1,如果否,点击标签后,跳转 home;如果点击关闭 tab 标签的索引不是最后一个,那么路由同时跳转到 当前索引 + 1 的路由;如果点击关闭 tab 标签的索引是最后一个,那么路由同时跳转到 当前索引 - 1 的路由。

const closeTagView = (router_, index, tagViewLength) => {
  let replacePath
  if (tagViewLength <= 1){
    router.replace({path: '/'})
  }
  if (index < tagViewLength - 1) {
    replacePath = tagViewStore.tagViews[index + 1].path
  } else {
    replacePath = tagViewStore.tagViews[index - 1].path
  }
  tagViewStore.delTagView(router_)
  router.replace({path: replacePath})
}

或者

  tagViewStore.delTagView(router_)
  router.replace({path: tagViewLength <= 1?'/admin':tagViewStore.tagViews[index < tagViewLength - 1 ? index + 1 : index - 1].path})
回复
1个回答
avatar
test
2024-07-12

不是因该头跳转到 N-1 么?只有在关闭第一个的时候才是 N+1。😂哦,其实都一样。

通过 findIndex 去获取下标就行,看看是否是首个/最后一个选项卡,然后走单独的路由规则就行了。当然也可以在循环的时候把 index 传入绑定的方法这样就不需要去找下标了。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容