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


Posted in Javascript onSeptember 07, 2018

vue-router 该如何使用

忽然碰到一个常见的问题,明明可以使用 v-if / v-show 可以的解决的问题,有没有必要是使用 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">
 <router-link to="/tab1">tab1</router-link>
 <router-link to="/tab2">tab2</router-link>
 <router-link to="/tab3">tab3</router-link>
 <router-link to="/tab4">tab4</router-link>
 <router-view></router-view>
</div>

使用 v-if/v-show

.vue

<div class="tab">
 <button @click="handleTab(1)">tab1</button>
 <button @click="handleTab(2)">tab2</button>
 <button @click="handleTab(3)">tab3</button>
 <button @click="handleTab(4)">tab4</button>
 <div v-if="isShow === 1"><Tab1 /></div>
 <div v-if="isShow === 2"><Tab2 /></div>
 <div v-if="isShow === 3"><Tab3 /></div>
 <div v-if="isShow === 4"><Tab4 /></div>
</div>
/**
 * script
 */
 data () {
  return {
   isShow: 1
  }
 },
 methods: {
  handleTab (v) {
   this.isShow = v
  }
 }

效果如下

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

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

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

vue-router

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

v-if

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

总结:

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

以上所述是小编给大家介绍的vue-router与v-if实现tab切换的思考,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
js实现登录与注册界面
Nov 01 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
微信小程序云开发之使用云函数
May 17 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
VUE DOM加载后执行自定义事件的方法
Sep 07 #Javascript
详解JavaScript事件循环机制
Sep 07 #Javascript
解决vue 引入子组件报错的问题
Sep 06 #Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 #Javascript
vue 解决循环引用组件报错的问题
Sep 06 #Javascript
vue slots 组件的组合/分发实例
Sep 06 #Javascript
React注册倒计时功能的实现
Sep 06 #Javascript
You might like
星际争霸任务指南——神族
2020/03/04 星际争霸
基于PHP读取csv文件内容的详解
2013/06/18 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
《凡卡》教学反思
2014/04/09 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
工作会议通知
2015/04/15 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
Feign调用传输文件异常的解决
2021/06/24 Java/Android
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB