功能描述

如图所示，现在处于tab栏的第四项，如果点击跳转，则在跳转后的页面进行回跳时 tab栏会回到第一项，这往往不满足要求，那么如何实现回跳时依旧回到第四项呢？

功能代码

核心代码：

this.$touter 会显示当前页面的路由信息 this.$router.replace()跳转并替换路由信息

由于tab栏在切换时往往打上了标识，按条件显示不同的tab组件内容，如数字：0,1,2...如下图

代码：

            <van-tab title="课堂互动" />
            <van-tab title="学生概况" />
            <van-tab title="课堂学程" />
            <van-tab title="课堂展示" />
            <van-tab title="课堂资源" />
            <van-tab title="课堂推送" />
            <van-tab title="课堂记录" />
          </van-tabs>
          <template v-if="active===0">
            <interaction />
          </template>
          <template v-else-if="active===1">
            <survey />
          </template>
          <template v-else-if="active===2">
            <course />
          </template>
          <template v-else-if="active===3">
            <exhibition />
          </template>
          <template v-else-if="active===4">
            <resources />
          </template>
          <template v-else-if="active===5">
            <propelling />
          </template>
          <template v-else-if="active===6">
            <record />
          </template>

所以，如果要实现回跳时显示上一次跳转时的tab内容则只需要让跳转时该页面的active值为之前的数字即可，通过create钩子使得显示该页面时自动回到上次的tab内容。

具体操作：

1.在tab栏的change事件： <van-tabs v-model="active" background="transparent" color="#0084FF" line-width="64px" @change="change">

2.在tab栏的change事件中触发：保存active：用this.$router.replace方法在路由信息中添加一个query信息标识，把当前的active值保存起来。

    change(active) {
      this.$router.replace({
        path: '/report/details',
        query: { type: active }
      })

3.取用：this.$router.history.current.query.type 我们打印一下当前的路由信息:如图

当前ative值已经保存在理由的query参数中，我们在地址栏中也可以看到

拿到了active值便可以实现页面刷新时默认停留在上次的tab栏内容：在create钩子中触发：没有切换栏目跳转时默认为第一项: this.active = this.$router.history.current.query.type | 0

tab栏切换后跳转其他页面，跳回时显示上次的tab栏内容

功能描述

功能代码

核心代码：

具体操作：