vue中tab切换前端实现_vue实现Tab切换功能

在项目开发中，我们经常会碰到Tab切换的功能，而在Vue中想实现这样的功能也应该有很多种，常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。每种方法实现起来其实都不难，看看官网介绍或看几篇博客应该就能实现。

但这里面其实还有很多细节需要我们去做，如

Tab切换时，切换过的Tab组件状态怎样缓存

在项目中经常会有 页面A -> 页面B -> 页面C 则从 页面C 返回 页面B 时 页面B 使用缓存数据，而页面A 跳到 页面B 时，则页面B每次都请求最新数据。比如我们在某APP内点击 最新新闻(页面A) 选项 跳转到 新闻列表(页面B) 选择某一条新闻 跳转到 新闻详情(页面C) 页面，我们希望，从新闻详情返回到新闻列表时，直接用刚才请求的数据，而不每次都重新发送请求，而从 最新新闻 跳转到 新闻列表时，则都请求最新的数据

父组件如何给子组件传递参数

页面内Tab来回切换后，如何直接返回到上一级页面

页面循环切换时，前进或后退如何保证页面结构正确(具体下面会讲到)

Tab路由切换带缓存

想要通过路由进行切换，就需要使用嵌套路由，即整个大页面是一个路由，点击不同Tab时，再通过嵌套路由来切换不同的路由。

想要Tab切换时保存当前状态可以使用keep-alive包裹，keep-alive具体使用参考这篇文章-vue中动态添加和删除组件缓存 keep-alive

包裹Tab的组件页面我们也要动态的缓存，这里也需要用到keep-alive，只是这个keep-alive需要添加到App.vue内，各个组件的动态缓存我们使用的是keep-alive的include属性。缓存最大数使用max属性

router-link介绍

通过to属性链接目标路由，当被点击时，内部会立刻把 to 的值传到 router.push()，既然是通过router.push()的方式跳转，那么就会往history记录中添加，这样当返回时，可能就会先从Tab3返回到Tab2再返回到Tab1再返回，这种体验很不好，怎样一步返回呢，就是在router-link中添加replace属性，这样当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录，这样就可一步返回了，如：

通过 命名的路由 传递参数，如：User

通过 带查询参数 传递参数，如：Register，结果路由为：/register?plan=private

router-link设置点击事件时需要添加 natvie， 如@click.native="TabClick()"

思路

通过router配置嵌套路由

通过使用keep-alive的include属性有条件的缓存组件

通过store响应式的修改include属性对应的值

通过组件内导航钩子beforeRouteEnter、beforeRouteLeave给store提交mutations修改

实例演示

1：page1->news->page2 然后再依次返回

通过演示我们发现

从page2返回到news时，总是能返回到我们之前保存的状态

从news返回到page1后，再从page1跳转news，不管news之前是什么状态，都会初始化显示购物的页面

2：page1(1)->news(2)->page2(3)->page1(4)->news(5)->page2(6) 然后再依次返回

这个视频里有几个问题需要我们去思考

第四步跳转到第五步，为什么Tab选中为购物、内容选中为鞋包，为什么news组件及内部路由组件都缓存着

第三步返回到第二步，为什么Tab选中为购物、内容选中为母婴，但从右边缓存的组件看，为什么shopping组件也被缓存了

这两个问题我们后边会具体介绍

部分代码示例

1：在router中配置各个路由

这里需要注意，配置children子路由时path不能加 / ，在router-link的to后面写的路由需要以 / 开头，以 / 开头的嵌套路径会被当作根路径

export default new Router({

routes: [

{

path: '/page1',

name: 'page1',

component: () => import(/* webpackChunkName: "test" */ './views/news/page1.vue')

}, {

path: '/page2',

name: 'page2',

component: () => import(/* webpackChunkName: "test" */ './views/news/page2.vue')

}, {

path: '/news',

name: 'newsIndex',

component: () => import(/* webpackChunkName: "test" */ './views/news/news.vue'),

children: [{

path: 'sports',

name: 'sports',

component: () => import(/* webpackChunkName: "test" */ './views/news/sports.vue'),

}, {

path: 'shopping',

name: 'shopping',

component: () => import(/* webpackChunkName: "test" */ './views/news/shopping.vue'),

}, {

path: 'learn',

name: 'learn',

component: () => import(/* webpackChunkName: "test" */ './views/news/learn.vue'),

}]

}

]

})

2：在App.vue组件通过computed计算属性响应式的获取store里的keepAliveArr计算属性，并赋值给keep-alive的include属性，并设置最多可缓存5个组件

page1跳转代码

btnLuYouClick() {

this.$router.push({

path: '/news/shopping',

query: {

content: '购物'

}

});

}

page2跳转代码

btnJumpClick() {

this.$router.push({

path: '/page1'

})

},

sports和learn代码比较简单就不粘贴了

上面的代码应该已经够用，如果需要全部详细代码的就留言吧，我再单独发你。