使用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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
JavaScript中的类继承
Nov 25 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
ajax请求前端跨域问题原因及解决方案
Oct 16 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入门速成(2)
2006/10/09 PHP
php str_pad 函数用法简介
2009/07/11 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
JS回调函数深入理解
2019/10/16 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
python版学生管理系统
2018/01/10 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python与字符编码问题
2019/05/24 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
社区党员先进事迹
2014/01/22 职场文书
植树造林的宣传标语
2014/06/23 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
环保建议书作文400字
2015/09/14 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers