使用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 QueryString解析类代码
Jan 17 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
js操作滚动条事件实例
Jan 29 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
vue 使用原生组件上传图片的实例
Sep 08 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
屏蔽浏览器缓存另类方法
2006/10/09 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Python创建临时文件和文件夹
2020/08/05 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
技术总监管理职责范本
2014/03/06 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
大专毕业生求职信
2014/07/05 职场文书
锦旗赠语
2015/06/23 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers