使用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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
Node.js事件驱动
Jun 18 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
Vue3.0的优化总结
Oct 16 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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 Cookie的一个使用注意点
2008/11/08 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
Python调用命令行进度条的方法
2015/05/05 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python全局变量用法实例分析
2016/07/19 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Django--权限Permissions的例子
2019/08/28 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
2014年征兵标语
2014/06/20 职场文书
2014年村委会工作总结
2014/11/24 职场文书
2014年科普工作总结
2014/12/06 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
职工年度考核评语
2014/12/31 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫