使用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 相关文章推荐
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
浅谈React高阶组件
Mar 28 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
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
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python 闭包的使用方法
2017/09/07 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
python excel和yaml文件的读取封装
2021/01/12 Python
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
十八届三中全会感言
2014/03/10 职场文书
辩论赛主持词
2014/03/18 职场文书
小学课外活动总结
2014/07/09 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS