这篇文章主要介绍了vue-router与v-if实现tab切换的思考,需要的朋友可以参考下
vue-router 该如何使用
忽然碰到一个常见的问题，明明可以使用 v-if / v-show 本文来源gaodai$ma#com搞$代*码*网(可以的解决的问题，有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间，我有些犹豫了，有没有必要滥用 vue-router。那到底何时用才叫合理呢？
先上代码，用两种方式实现的效果
使用vue-router
router
import Tab1 from './components/tab/TabOne' import Tab2 from './components/tab/TabTwo' import Tab3 from './components/tab/TabThree' import Tab4 from './components/tab/TabFour' const routes = [ {path: '/tab1', component: Tab1}, {path: '/tab2', component: Tab2}, {path: '/tab3', component: Tab3}, {path: '/tab4', component: Tab4}, ] const router = new VueRouter({ routes })
.vue 文件中
<div class="tab"> tab1tab2tab3tab4</div>
使用 v-if/v-show
.vue
<div class="tab"> <button>tab1</button><button>tab2</button><button>tab3</button><button>tab4</button><div></div><div></div><div></div><div></div></div> /** * script */ data () { return { isShow: 1 } }, methods: { handleTab (v) { this.isShow = v } }
效果如下
- 上方为路由
- 下方为v-if
目前看起来效果一致。那就从另一个角度考虑，页面结构。
vue-router
v-if
- 目前看起来，效果没有很大区别，代码量也没有减少
- 使用原生，可能是用索引进行关联，在vue中推荐使用 数据进行驱动
- 暂且记录一笔，以待后期继续研究
以上所述是小编给大家介绍的vue-router与v-if实现tab切换的思考，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对gaodaima搞代码网网站的支持！
以上就是使用vue-router与v-if实现tab切换遇到的问题及解决方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：使用vue-router与v-if实现tab切换遇到的问题及解决方法
转载请注明原文链接：使用vue-router与v-if实现tab切换遇到的问题及解决方法
