vue如何实现指定路由传参和页面跳转？

vue router页面跳转的问题，如图所示，我点击了home页面的vant tab一个产品标签，点击第一篇文章：

img

然后，我在article页面下点击返回，我本应该返回上一个tab标签页，但是结果却直接返回默认推荐了，如下图所示：

img

点击返回之后 直接显示默认推荐的tab了，如何才能做到返回刚才的产品标签tab？

我的home.vue代码如下：

<template>
  <div class="home-container">
    
    <van-nav-bar class="page-nav-bar" fixed>
      <van-button
        class="search-btn"
        slot="title"
        type="info"
        size="small"
        round
        icon="search"
        to="/search"
      >搜索
      van-button>
    van-nav-bar>
    

    
    
    <van-tabs class="channel-tabs" v-model="active" animated swipeable>
      <van-tab
        :title="channel.name"
        v-for="channel in channels"
        :key="channel.id"
      >
        
        <article-list ref="article-list" :channel="channel"/>
        
      van-tab>

      
      <div slot="nav-right" class="placeholder">div>
      <div slot="nav-right" class="hamburger-btn" @click="isChannelEditShow = true">
        <i class="toutiao toutiao-gengduo">i>
      div>
    van-tabs>
    

    
    <van-popup
      v-model="isChannelEditShow"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <ChannelEdit :my-channels="channels" :active="active" @update-active="onUpdateActive"/>
    van-popup>
    
  div>
template>

<script>
import { getUserChannels } from '../../api/user'
import ArticleList from './components/article-list'
import ChannelEdit from './components/channel-edit'
import { mapState } from 'vuex'
import { getItem } from '../../utils/storage'

export default {
  name: 'HomeIndex',
  components: {
    ArticleList,
    ChannelEdit
  },
  props: {},
  data () {
    return {
      active: 0,
      isChannelEditShow: false, // 控制显示状态
      channels: [] // 频道列表
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  created () {
    this.loadChannels()
  },
  mounted () {
    window.home = this
  },
  methods: {
    async loadChannels () {
      try {
        // const { data } = await getUserChannels()
        // this.channels = data.data.channels
        // console.log(data, '<<
        let channels = []
        if (this.user) {
          // 已经登录 请求获取用户的频道列表
          const { data } = await getUserChannels()
          channels = data.data.channels
        } else {
          // 未登录 就判定是否有本地的频道列表数据
          const localChannels = getItem('TOUTIAO_CHANNELS')
          // 有 直接使用
          if (localChannels) {
            channels = localChannels
          } else {
            // 没有 则请求获取默认的频道列表
            const { data } = await getUserChannels()
            channels = data.data.channels
          }
        }

        this.channels = channels
      } catch (err) {
        console.log(err, '<<< err info')
        this.$toast('获取频道数据失败')
      }
    },

    onUpdateActive (index, isChannelEditShow = true) {
      console.log(index)
      this.active = index
      // 关闭编辑频道
      this.isChannelEditShow = isChannelEditShow
    }
  }
}
script>

<style scoped lang="less">
  .home-container {
    padding-top: 174px;
    padding-bottom: 100px;

    /deep/ .van-nav-bar__title {
      max-width: unset;
    }

    .search-btn {
      width: 555px;
      height: 64px;
      background-color: #5babfb;
      border: none;
      font-size: 28px;

      .van-icon {
        font-size: 32px;
      }
    }

    /*深度操作符*/

    /deep/ .channel-tabs {
      .van-tabs__wrap {
        position: fixed;
        top: 92px;
        z-index: 1;
        left: 0;
        right: 0;
        height: 82px;
      }

      .van-tab {
        border-right: 1px solid #edeff3;
        min-width: 200px;
        font-size: 30px;
        color: #777;
      }

      .van-tab--active {
        color: #333;
      }

      .van-tabs__nav {
        padding-bottom: 0;
      }

      .van-tabs__line {
        bottom: 8px;
        width: 31px !important;
        height: 6px;
        background-color: #3296fa;
      }

      .placeholder {
        flex-shrink: 0;
        width: 66px;
        height: 82px;
      }

      .hamburger-btn {
        position: fixed;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 66px;
        height: 82px;
        background-color: #fff;
        opacity: 0.902;
        /*background-color: rgba(255, 255, 255, 0.902);*/

        i.toutiao {
          font-size: 33px;
        }

        &:before {
          content: "";
          position: absolute;
          left: 0;
          width: 3px;
          height: 58px;
          background-image: url(../../assets/gradient-gray-line.png);
          background-size: contain;
        }
      }
    }
  }
style>

接下来是我的article.vue代码：

<template>
  <div class="article-container">
    
    <van-nav-bar
      class="page-nav-bar"
      left-arrow
      title="黑马头条"
      @click-left="routerBack(active)"
    >van-nav-bar>
    

    <div class="main-wrap">
      
      <div v-if="loading" class="loading-wrap">
        <van-loading
          color="#3296fa"
          vertical
        >加载中van-loading>
      div>
      

      
      <div v-else-if="article.title" class="article-detail">
        
        <h1 class="article-title">{{ article.title }}h1>
        

        
        <van-cell class="user-info" center :border="false">
          <van-image
            class="avatar"
            slot="icon"
            round
            fit="cover"
            :src="article.aut_photo"
          />
          <div slot="title" class="user-name">{{ article.aut_name }}div>
          <div slot="label" class="publish-date">{{ article.pubdate | relativeTime }}div>
          
          <follow-user
            class="follow-btn"
            v-model="article.is_followed"
            :user-id="article.aut_id"
          />
          
        van-cell>
        

        
        <div
          class="article-content markdown-body"
          v-html="article.content"
          ref="article-content"
        >div>
        <van-divider>正文结束van-divider>

        
        <comment-list
          :source="article.art_id"
          :list="commentList"
          @onload-success="totalCommentCount = $event.total_count"
        />
        

        
        <div class="article-bottom">
          <van-button
            class="comment-btn"
            type="default"
            round
            size="small"
            @click="isPostShow = true"
          >写评论van-button>
          <van-icon
            class="comment-icon"
            name="comment-o"
            :info="totalCommentCount"
          />
          <collect-article
            class="btn-item"
            v-model="article.is_collected"
            :article-id="article.art_id"
          />
          <like-article
            class="btn-item"
            v-model="article.attitude"
            :article-id="article.art_id"
          />
          <van-icon name="share" color="#777777">van-icon>
        div>
        

        
        <van-popup
          v-model="isPostShow"
          position="bottom"
        >
          <comment-post
            :target="article.art_id"
            @post-success="onPostSuccess"
          />
        van-popup>
        
      div>
      

      
      <div v-else-if="errStatus === 404" class="error-wrap">
        <van-icon name="failure" />
        <p class="text">该资源不存在或已删除！p>
      div>
      

      
      <div v-else class="error-wrap">
        <van-icon name="failure" />
        <p class="text">内容加载失败！p>
        <van-button
          class="retry-btn"
          @click="loadArticle"
        >点击重试van-button>
      div>
      
    div>
  div>
template>

<script>

import { getArticleById } from '../../api/article'
import { ImagePreview } from 'vant'

export default {
  name: 'ArticleIndex',
  data () {
    return {
      article: {}, // 文章详情
      loading: true, // 加载中的loading状态
      errStatus: 0 // 失败的状态码
    }
  },
  props: {
    articleId: {
      type: [Number, String, Object],
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  created () {
    this.loadArticle()
  },
  methods: {
    routerBack () {
      this.$router.push({
        path: '/home',
        query: {
          selected: this.active
        }
      })
    },

    async loadArticle () {
      try {
        const { data } = await getArticleById(this.articleId)
        console.log(data, '<<<文章详情data')
        // 数据驱动视图存在延迟
        this.article = data.data

        // 初始化图片点击的预览
        // console.log(this.$refs['article-content'])
        setTimeout(() => {
          console.log(this.$refs['article-content'])
          this.previewImage()
        }, 0)

        // 请求成功 关闭loading
        // this.loading = false
      } catch (e) {
        this.$toast('获取文章失败 请重试')
        if (e.repsonse && e.repsonse.status === 404) {
          this.errStatus = 404
        }
        console.log(e)
      }
      this.loading = false
    },

    previewImage () {
      // 得到所有的img节点
      const articleContent = this.$refs['article-content']
      const imgs = articleContent.querySelectorAll('img')
      const images = []
      imgs.forEach((img, index) => {
        images.push(img.src)
        console.log(images)
        img.onclick = () => {
          ImagePreview({
            // 预览的图片数组
            images,
            startPosition: index
          })
        }
      })
    }
  }
}
script>

<style scoped lang="less">
  @import "./github-markdown.css";

  .article-container {
    .main-wrap {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;
    }
    .article-detail {
      position: fixed;
      left: 0;
      right: 0;
      top: 92px;
      bottom: 88px;
      overflow-y: scroll;
      background-color: #fff;
      .article-title {
        font-size: 40px;
        padding: 50px 32px;
        margin: 0;
        color: #3a3a3a;
      }

      .user-info {
        padding: 0 32px;
        .avatar {
          width: 70px;
          height: 70px;
          margin-right: 17px;
        }
        .van-cell__label {
          margin-top: 0;
        }
        .user-name {
          font-size: 24px;
          color: #3a3a3a;
        }
        .publish-date {
          font-size: 23px;
          color: #b7b7b7;
        }
        .follow-btn {
          width: 170px;
          height: 58px;
        }
      }

      .article-content {
        padding: 55px 32px;
        /deep/ p {
          text-align: justify;
        }
      }
    }

    .loading-wrap {
      padding: 200px 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
    }

    .error-wrap {
      padding: 200px 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      .van-icon {
        font-size: 122px;
        color: #b4b4b4;
      }
      .text {
        font-size: 30px;
        color: #666666;
        margin: 33px 0 46px;
      }
      .retry-btn {
        width: 280px;
        height: 70px;
        line-height: 70px;
        border: 1px solid #c3c3c3;
        font-size: 30px;
        color: #666666;
      }
    }

    .article-bottom {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-sizing: border-box;
      height: 88px;
      border-top: 1px solid #d8d8d8;
      background-color: #fff;
      .comment-btn {
        width: 282px;
        height: 46px;
        border: 2px solid #eeeeee;
        font-size: 30px;
        line-height: 46px;
        color: #a7a7a7;
      }
      /deep/ .van-icon {
        font-size: 40px;
      }
      .comment-icon {
        top: 2px;
        color: #777;
        .van-info {
          font-size: 16px;
          background-color: #e22829;
        }
      }
      .btn-item {
        border: none;
        padding: 0;
        height: 40px;
        line-height: 40px;
        color: #777777
      }
      .collect-btn--collected {
        color: #ffa500;
      }
      .like-btn--liked {
        color: #e5645f;
      }
    }
  }
style>

用keep-alive标签把要保存的东西都抱住 可以去看一下keep-alive的用法 试一下能不能解决

这个返回 是自己写的还是系统自带的按钮

直接返历史页面上一页不好吗
history.back(); //返回上一页

keep-alive吧，或者跳转前先保存tab的状态，返回时进行赋值