使用vue-router与v-if实现tab切换遇到的问题及解决方法

前端之家收集整理的这篇文章主要介绍了使用vue-router与v-if实现tab切换遇到的问题及解决方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue-router 该如何使用

忽然碰到一个常见的问题,明明可以使用 v-if / v-show 可以的解决的问题,有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间,我有些犹豫了,有没有必要滥用 vue-router。那到底何时用才叫合理呢?

先上代码,用两种方式实现的效果

使用vue-router

router

.vue 文件

使用 v-if/v-show

.vue

/** * script */ data () { return { isShow: 1 } },methods: { handleTab (v) { this.isShow = v } }

效果如下

  • 上方为路由
  • 下方为v-if

目前看起来效果一致。那就从另一个角度考虑,页面结构。

vue-router

v-if

总结:

  • 目前看起来,效果没有很大区别,代码量也没有减少
  • 使用原生,可能是用索引进行关联,在vue中推荐使用 数据进行驱动
  • 暂且记录一笔,以待后期继续研究

以上所述是小编给大家介绍的vue-router与v-if实现tab切换的思考。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章