使用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 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
分类解析jQuery选择器
Nov 23 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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函数解决SQL injection
2006/12/09 PHP
php设置编码格式的方法
2013/03/05 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
python中pygame模块用法实例
2014/10/09 Python
Python Pillow Image Invert
2019/01/22 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
PyTorch中的Variable变量详解
2020/01/07 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
高中生自我评语大全
2014/01/19 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
仓库规划计划书
2014/04/28 职场文书
公司募捐倡议书
2014/05/14 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
活动新闻稿范文
2015/07/17 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL