vuejs同一个路由下面、切换标签。实现缓存前进后退功能

向右看齐 2022-12-05 10:07 158阅读 0赞

已解决：  
经大神的提点。没有使用keepalive。原因是要改动的地方比较多。主要是我也不太懂。  
然后我用了2种方法可以解决问题：  
第一种：改变路由（推荐）![254c17503c65b0473753b29b8c48d98c.png][]

第二种：缓存的方法（听说缓存可能会出现某些问题。虽然我暂时没有发现）  
![5fa4a7318b459c35099a648384cd49e9.png][]

第一种方法的代码：改变路由

<template>
      <el-container direction="vertical">
        <sys-header/>
        <el-main class="main-box">
          
          <div class="topic-list-box">
            
            <div class="topic-list-header">
              <div class="topic-list-header-left">
                <el-avatar :src="topicForm.topicLogo" :size="90" alt="话题logo"></el-avatar>
                <div class="follow-and-question-sum">
                  <div class="topic-name">{
       { topicForm.topicName }}</div>
                  <div class="info-sum">{
       { topicForm.followSum }}关注 / {
       { topicForm.questionSum }}问题</div>
                </div>
              </div>
              <div class="topic-list-header-right">
                
                <el-button
                  @click="topicForm.isFlow === 1 ? unAttentionTopic(topicForm.topicId) : attentionTopic(topicForm.topicId)"
                  :class="topicForm.isFlow === 1 ? 'active' : ''"
                >
                  <span>{
       { topicForm.isFlow === 1 ? '已关注' : '关注话题' }}</span>
                </el-button>
              </div>
            </div>
            <div class="clearfix"></div>
            
            <div class="child-topic" v-if="topicForm.stopicMap && topicForm.stopicMap.length">
              <ul>
                <li
                  v-for="(item,index) in topicForm.stopicMap"
                  :key="index"
                  @click="getSecondTopic(index)"
                >
                  <a>
                    <span>{
       { item }}</span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="clearfix"></div>
          </div>
          
          
          <div class="topic-list-bottom-box">
            <el-tabs v-model="activeName" @tab-click="handleClick" class="topic-list-bottom">
              <el-tab-pane label="热门" name="hotTopic">
                <hot-topic-list :topicList="hotQuestionList"/>
              </el-tab-pane>
              <el-tab-pane label="问题" name="question">
                <question :topicList="questionArticleList"/>
              </el-tab-pane>
              <el-tab-pane label="视频" name="topicVideo">
                <topic-video :topicList="topicVideoArticleList"/>
              </el-tab-pane>
              <el-tab-pane label="资讯" name="information">
                <information :topicList="informationArticleList"/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-main>
      </el-container>
    </template>
    
    <script>
    import sysHeader from "@/components/header";
    import apiRequest from "../../utils/request";
    import HotTopicList from "./components/HotTopicList";
    import Question from "./components/Question";
    import TopicVideo from "./components/TopicVideo";
    import Information from "./components/Information";
    import {attentionTopic, unAttentionTopic} from "../../api/topic";
    
    export default {
      name: "TopicDetail",
      components: {
        Information,
        TopicVideo,
        Question,
        HotTopicList,
        sysHeader,
      },
      data() {
        return {
          activeName: 'hotTopic',
          selectedIndex: 0,
          topicForm: {},
          hotQuestionList: [],
          questionArticleList: [],
          topicVideoArticleList: [],
          informationArticleList: [],
        };
      },
      mounted() {
        this.getHotTopicList(this.$route.query.topicId);
        this.getInformationArticleList(this.$route.query.topicId, 1, 10);
        this.getTopicQuestion(this.$route.query.topicId, 1, 10);
        this.getTopicVideo(this.$route.query.topicId, 1, 10);
        this.getSecondTopic(this.$route.query.topicId);
      },
      created() {
        this.activeName = this.$route.query.name
        console.log(this.activeName)
      },
      methods: {
        handleClick(tab, event) {
          this.$router.replace({
            query: {
              topicId: this.$route.query.topicId,
              name: tab.paneName || 'hotTopic'
            }
          });
        },
        // 关注话题0-未关注 1-已关注
        async attentionTopic(topicId) {
          await attentionTopic(topicId);
          this.getSecondTopic(topicId);
        },
    
        // 取消关注话题
        async unAttentionTopic(topicId) {
          await unAttentionTopic(topicId);
          this.getSecondTopic(topicId);
        },
    
        // 获取话题详情
        getSecondTopic(topicId) {
          apiRequest("get", "qas/api/topic/secondTopic/" + topicId, {
            // topicId: topicId,
            // userId: localStorage.getItem("userid"),
          }).then((res) => {
            this.topicForm = res.data;
          });
        },
    
        // 获取热门
        getHotTopicList(topicId) {
          apiRequest("get", "/qas/api/topic/hotTopicList/" + topicId)
            .then((res) => {
              console.log(res.data);
              console.log(res.data.pageRecords);
              this.hotQuestionList = res.data.pageRecords;
            })
            .catch((err) => {
              if (err) {
                console.log(err.message);
              }
            });
        },
        // 获取资讯
        getInformationArticleList(topicId, pageNumber, pageSize) {
          apiRequest("get", "/qas/api/topic/topicArticle/" + topicId, {
            pageNumber: pageNumber,
            pageSize: pageSize,
          })
            .then((res) => {
              console.log(res.data);
              console.log(res.data.pageRecords);
              this.informationArticleList = res.data.pageRecords;
              // console.log("资讯名称：" + this.informationArticleList[0].articleName)
              // console.log("资讯id：" + this.informationArticleList[0].articleId)
            })
            .catch((err) => {
              if (err) {
                console.log(err.message);
              }
            });
        },
        // 获取视频列表
        getTopicVideo(topicId, pageNumber, pageSize) {
          apiRequest("get", "/qas/api/topic/topicVideo/" + topicId, {
            pageNumber: pageNumber,
            pageSize: pageSize,
          })
            .then((res) => {
              console.log(res.data);
              console.log(res.data.pageRecords);
              this.topicVideoArticleList = res.data.pageRecords;
            })
            .catch((err) => {
              if (err) {
                console.log(err.message);
              }
            });
        },
        // 获取问题列表
        getTopicQuestion(topicId, pageNumber, pageSize) {
          apiRequest("get", "/qas/api/topic/topicQuestion/" + topicId, {
            pageNumber: pageNumber,
            pageSize: pageSize,
          })
            .then((res) => {
              console.log(res.data);
              console.log(res.data.pageRecords);
              this.questionArticleList = res.data.pageRecords;
            })
            .catch((err) => {
              if (err) {
                console.log(err.message);
              }
            });
        },
      },
      watch: {
        $route(to, from) {
          // 监听路由的变化，做你想做的一些事情...
          // console.log('监听路由,路由变了');
        },
      },
    };
    </script>
    
    
    <style lang="scss">
    .topic-list-bottom-box {
      .el-tabs__item {
        position: relative;
        height: auto;
        line-height: normal;
        margin-right: 50px;
        padding: 0;
        font-size: $default-font;
      }
    
      .el-tabs__item.is-active {
        color: $theme-color;
        font-size: $max-font;
        font-weight: bold;
      }
    
      .el-tabs__active-bar {
        display: none;
      }
    
      .el-tabs__nav {
        margin-bottom: 20px;
      }
    
      .el-tabs__nav-wrap::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #f2f4f7;
        z-index: 1;
      }
    }
    </style>
    
    <style lang="scss" scoped>
    .main-box {
      @include maxwidth;
      width: 100%;
      padding: 18px 30px;
    
      background-color: #FFFFFF;
    
      .topic-list-box {
        @include box;
        //padding: 18px 30px;
        margin-bottom: 20px;
    
        .topic-list-header {
          @include flex-center-sb;
    
          .topic-list-header-left {
            @include flex-start-center;
    
            .follow-and-question-sum {
              padding-left: 20px;
    
              .topic-name {
                font-weight: bold;
                font-size: $max-font;
                padding-bottom: 15px;
              }
    
              .info-sum {
                color: $third-color;
                font-size: $small-font;
              }
            }
          }
    
          .topic-list-header-right {
            .el-button {
              @include activeBtn;
              font-size: $small-font;
              padding: 8px 15px;
    
              &.active {
                background: $third-color;
              }
            }
          }
        }
    
        .child-topic {
          padding-top: 30px;
          //margin-bottom: 66px;
          li {
            background: #f6f6f6;
            border-radius: 80px;
            float: left;
            margin-bottom: 20px;
            margin-right: 25px;
    
            a {
              height: 30px;
              padding: 5px 15px;
              display: block;
              text-align: center;
              line-height: 30px;
              font-size: 14px;
              color: #666666;
            }
          }
        }
      }
    }
    
    .topic-list-bottom-box {
      @include box;
    }
    </style>

第二种方法的代码：缓存的方法

<template>
      <el-container direction="vertical">
        <sys-header />
        <el-main class="main-box">
          
          <div class="topic-list-box">
            
            <div class="topic-list-header">
              <div class="topic-list-header-left">
                <el-avatar :src="topicForm.topicLogo" :size="90" alt="话题logo"></el-avatar>
                <div class="follow-and-question-sum">
                  <div class="topic-name">{
       { topicForm.topicName }}</div>
                  <div class="info-sum">{
       { topicForm.followSum }}关注 / {
       { topicForm.questionSum }}问题</div>
                </div>
              </div>
              <div class="topic-list-header-right">
                
                <el-button
                  @click="topicForm.isFlow === 1 ? unAttentionTopic(topicForm.topicId) : attentionTopic(topicForm.topicId)"
                  :class="topicForm.isFlow === 1 ? 'active' : ''"
                >
                  <span>{
       {topicForm.isFlow===1?'已关注':'关注话题'}}</span>
                </el-button>
              </div>
            </div>
            <div class="clearfix"></div>
            
            <div class="child-topic" v-if="topicForm.stopicMap && topicForm.stopicMap.length">
              <ul>
                <li
                  v-for="(item,index) in topicForm.stopicMap"
                  :key="index"
                  @click="getSecondTopic(index)"
                >
                  <a>
                    <span>{
       { item }}</span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="clearfix"></div>
          </div>
          
          
          <div class="topic-list-bottom-box">
            <el-tabs v-model="activeName" @tab-click="handleClick" class="topic-list-bottom">
              <el-tab-pane label="热门" name="hotTopic">
                <hot-topic-list :topicList="hotQuestionList" />
              </el-tab-pane>
              <el-tab-pane label="问题" name="question">
                <question :topicList="questionArticleList" />
              </el-tab-pane>
              <el-tab-pane label="视频" name="topicVideo">
                <topic-video :topicList="topicVideoArticleList" />
              </el-tab-pane>
              <el-tab-pane label="资讯" name="information">
                <information :topicList="informationArticleList" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-main>
      </el-container>
    </template>
    
    <script>
    import sysHeader from "@/components/header";
    import apiRequest from "../../utils/request";
    import HotTopicList from "./components/HotTopicList";
    import Question from "./components/Question";
    import TopicVideo from "./components/TopicVideo";
    import Information from "./components/Information";
    import { attentionTopic, unAttentionTopic } from "../../api/topic";
    
    export default {
      name: "TopicDetail",
      components: {
        Information,
        TopicVideo,
        Question,
        HotTopicList,
        sysHeader,
      },
      data() {
        return {
          activeName: localStorage.getItem('activeName'),
          selectedIndex: 0,
          topicForm: {},
          hotQuestionList: [],
          questionArticleList: [],
          topicVideoArticleList: [],
          informationArticleList: [],
        };
      },
      mounted() {
        this.getHotTopicList(this.$route.query.topicId);
        this.getInformationArticleList(this.$route.query.topicId, 1, 10);
        this.getTopicQuestion(this.$route.query.topicId, 1, 10);
        this.getTopicVideo(this.$route.query.topicId, 1, 10);
        this.getSecondTopic(this.$route.query.topicId);
      },
      created() {
        localStorage.setItem('activeName','hotTopic')
      },
      methods: {
        handleClick(tab, event) {
          // console.log(tab, event);
          console.log(tab.paneName);
          if (tab.paneName==='question'){
            localStorage.setItem('activeName','question')
          }else if (tab.paneName==='topicVideo'){
            localStorage.setItem('activeName','topicVideo')
          }else if (tab.paneName==='information'){
            localStorage.setItem('activeName','information')
          }else{
            localStorage.setItem('activeName','hotTopic')
          }
          console.log(localStorage.getItem('activeName'))
        },
        // 关注话题0-未关注 1-已关注
        async attentionTopic(topicId) {
          await attentionTopic(topicId);
          this.getSecondTopic(topicId);
        },
    
        // 取消关注话题
        async unAttentionTopic(topicId) {
          await unAttentionTopic(topicId);
          this.getSecondTopic(topicId);
        },
    
        // 获取话题详情
        getSecondTopic(topicId) {
          apiRequest("get", "qas/api/topic/secondTopic/" + topicId, {
            // topicId: topicId,
            // userId: localStorage.getItem("userid"),
          }).then((res) => {
            this.topicForm = res.data;
          });
        },
    
        // 获取热门
        getHotTopicList(topicId) {
          apiRequest("get", "/qas/api/topic/hotTopicList/" + topicId)
            .then((res) => {
              console.log(res.data);
              console.log(res.data.pageRecords);
              this.hotQuestionList = res.data.pageRecords;
            })
            .catch((err) => {
              if (err) {
                console.log(err.message);
              }
            });
        },
        // 获取资讯
        getInformationArticleList(topicId, pageNumber, pageSize) {
          apiRequest("get", "/qas/api/topic/topicArticle/" + topicId, {
            pageNumber: pageNumber,
            pageSize: pageSize,
          })
            .then((res) => {
              console.log(res.data);
              console.log(res.data.pageRecords);
              this.informationArticleList = res.data.pageRecords;
              console.log("资讯名称："+this.informationArticleList[0].articleName)
              console.log("资讯id："+this.informationArticleList[0].articleId)
            })
            .catch((err) => {
              if (err) {
                console.log(err.message);
              }
            });
        },
        // 获取视频列表
        getTopicVideo(topicId, pageNumber, pageSize) {
          apiRequest("get", "/qas/api/topic/topicVideo/" + topicId, {
            pageNumber: pageNumber,
            pageSize: pageSize,
          })
            .then((res) => {
              console.log(res.data);
              console.log(res.data.pageRecords);
              this.topicVideoArticleList = res.data.pageRecords;
            })
            .catch((err) => {
              if (err) {
                console.log(err.message);
              }
            });
        },
        // 获取问题列表
        getTopicQuestion(topicId, pageNumber, pageSize) {
          apiRequest("get", "/qas/api/topic/topicQuestion/" + topicId, {
            pageNumber: pageNumber,
            pageSize: pageSize,
          })
            .then((res) => {
              console.log(res.data);
              console.log(res.data.pageRecords);
              this.questionArticleList = res.data.pageRecords;
            })
            .catch((err) => {
              if (err) {
                console.log(err.message);
              }
            });
        },
      },
    };
    </script>
    
    
    <style lang="scss">
    .topic-list-bottom-box {
      .el-tabs__item {
        position: relative;
        height: auto;
        line-height: normal;
        margin-right: 50px;
        padding: 0;
        font-size: $default-font;
      }
    
      .el-tabs__item.is-active {
        color: $theme-color;
        font-size: $max-font;
        font-weight: bold;
      }
    
      .el-tabs__active-bar {
        display: none;
      }
    
      .el-tabs__nav {
        margin-bottom: 20px;
      }
    
      .el-tabs__nav-wrap::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #f2f4f7;
        z-index: 1;
      }
    }
    </style>
    
    <style lang="scss" scoped>
    .main-box {
      @include maxwidth;
      width: 100%;
      padding: 18px 30px;
    
      background-color: #FFFFFF;
      .topic-list-box {
        @include box;
        //padding: 18px 30px;
        margin-bottom: 20px;
    
        .topic-list-header {
          @include flex-center-sb;
          .topic-list-header-left {
            @include flex-start-center;
            .follow-and-question-sum {
              padding-left: 20px;
              .topic-name {
                font-weight: bold;
                font-size: $max-font;
                padding-bottom: 15px;
              }
              .info-sum {
                color: $third-color;
                font-size: $small-font;
              }
            }
          }
    
          .topic-list-header-right {
            .el-button {
              @include activeBtn;
              font-size: $small-font;
              padding: 8px 15px;
              &.active {
                background: $third-color;
              }
            }
          }
        }
    
        .child-topic {
          padding-top: 30px;
          //margin-bottom: 66px;
          li {
            background: #f6f6f6;
            border-radius: 80px;
            float: left;
            margin-bottom: 20px;
            margin-right: 25px;
    
            a {
              height: 30px;
              padding: 5px 15px;
              display: block;
              text-align: center;
              line-height: 30px;
              font-size: 14px;
              color: #666666;
            }
          }
        }
      }
    }
    
    .topic-list-bottom-box {
      @include box;
    }
    </style>

[254c17503c65b0473753b29b8c48d98c.png]: /images/20221123/beb52fb4502642f78445b0671c2da075.png
[5fa4a7318b459c35099a648384cd49e9.png]: /images/20221123/ef76cada3c994624ad10fd871502ed6c.png