处理快速搜索页面跳转相关问题

src/views1/Retrieval/RetrievalView.vue

@@ -4,24 +4,12 @@
       <img src="../../assets/img/Group 467.png" alt="" />
     </div>
     <div class="search">
-      <el-input
-        type="text"
-        placeholder="请输入文档信息"
-        v-model="input"
-        @keyup.enter.native="searchs"
-      ></el-input>
-      <span class="cen—top-span" @click="searchs">快速搜索</span>
-      <img
-        src="../../assets/img/ri：search-2-line@2x.png"
-        class="cen—top-img"
-      />
+      <el-input type="text" placeholder="请输入文档信息" v-model="input" @keyup.enter.native="searchPre"></el-input>
+      <span class="cen—top-span" @click="searchPre">快速搜索</span>
+      <img src="../../assets/img/ri：search-2-line@2x.png" class="cen—top-img" />
     </div>
-    <div class="mains"  @scroll="handleScroll">
-      <div
-        v-for="item in count"
-        :key="item.id"
-        class="main-main"
-      >
+    <div class="mains" @scroll="handleScroll">
+      <div v-for="item in count" :key="item.id" class="main-main">
         <div class="one" @click="docName(item.id, item.content.info)">
           {{ item.content.info.docName }}
         </div>
@@ -35,13 +23,8 @@
             {{ item.content.info.createTime }}
           </div>
         </div>
-        <div
-          class="three"
-          v-for="highlightFieldsContentItem in item.highlightFields.content"
-          :key="highlightFieldsContentItem.id"
-          v-html="highlightFieldsContentItem"
-          style="white-space: normal"
-        ></div>
+        <div class="three" v-for="highlightFieldsContentItem in item.highlightFields.content"
+          :key="highlightFieldsContentItem.id" v-html="highlightFieldsContentItem" style="white-space: normal"></div>
         <ul class="four">
           <li v-for="tagName in item.content.info.tagList" :key="tagName.id">
             {{ tagName.tagName }}
@@ -53,180 +36,228 @@
 </template>
 
 <script>
-import { ret } from "@/api/doc/share1.js";
-
-export default {
-  data() {
-    return {
-      //搜索框绑定
-      input: "",
-      //搜索出来的数据
-      count: [],
-      page: 0,
-      size: 3
-    };
-  },
-  mounted() {
-    //添加滚动条事件
-    window.addEventListener("scroll", this.handleScroll, true);
-    this.input=this.$route.query.datas;
-  },
-  methods: {
-    handleScroll() {
-      const container = document.querySelector(".mains");
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      // console.log('scrollHeight',scrollHeight);
-      // console.log('clientHeight',clientHeight);
-      // console.log(scrollTop);
-      // 是否达到页面底部
-      if (scrollTop + clientHeight >= scrollHeight) {
-        // console.log('滚动到底部了！')
-        this.page+=1
-        // 执行加载
-        this.searchs()
-      }
+  import {
+    ret
+  } from "@/api/doc/share1.js";
+
+  export default {
+    data() {
+      return {
+        //搜索框绑定
+        input: "",
+        //搜索出来的数据
+        count: [],
+        page: 0,
+        size: 3
+      };
     },
+    created() {
+      this.input = this.$route.query.datas;
+      this.count = [];
+      this.searchs();
 
-    //查找返回的数据
-    searchs() {
-      // console.log('this.input=',this.input)
-      // console.log('this.page=',this.page)
-      // console.log('this.size=',this.size)
-      ret({ content: this.input, page: this.page, size: this.size }).then((item) => {
-        // console.log('item=',item)        
-        if (item.length > 0) {
-          this.count.push(...item);
-        }
-      })
     },
-    //预览界面
-    docName(curentDocId, value) {
-      this.$tab.openPage(
-        // window.open("/individual/Pre/user/" + curentDocId, "_blank"),
-       window.open("/individual/Pre/user/" + curentDocId+ "?value=" + JSON.stringify(value), "_blank"),
-      );
+    watch: {
+      $route: {
+        handler(val, oldval) {
+          this.input = this.$route.query.datas;
+          this.count = [];
+          this.searchs();
+        },
+        // 深度观察监听
+        deep: true
+      }
+    },
+    mounted() {
+      //添加滚动条事件
+      window.addEventListener("scroll", this.handleScroll, true);
+    },
+    methods: {
+      searchPre() {
+        // location.href="/home/retrieval?datas=" + this.input;
+        this.$router.push("/home/retrieval?datas=" + this.input);
+      },
+      handleScroll() {
+        const container = document.querySelector(".mains");
+        const {
+          scrollTop,
+          scrollHeight,
+          clientHeight
+        } = container;
+        // console.log('scrollHeight',scrollHeight);
+        // console.log('clientHeight',clientHeight);
+        // console.log(scrollTop);
+        // 是否达到页面底部
+        if (scrollTop + clientHeight >= scrollHeight) {
+          // console.log('滚动到底部了！')
+          this.page += 1
+          // 执行加载
+          this.searchs()
+        }
+      },
+
+      //查找返回的数据
+      searchs() {
+        ret({
+          content: this.input,
+          page: this.page,
+          size: this.size
+        }).then((item) => {
+          // console.log('item=',item)
+          if (item.length > 0) {
+            this.count.push(...item);
+          }
+        })
+      },
+      //预览界面
+      docName(curentDocId, value) {
+        this.$tab.openPage(
+          // window.open("/individual/Pre/user/" + curentDocId, "_blank"),
+          window.open("/individual/Pre/user/" + curentDocId + "?value=" + JSON.stringify(value), "_blank"),
+        );
+      },
     },
-  },
-};
+  };
 </script>
 <style lang='scss'>
-.three {
-  margin-bottom: calc(100vw * (10 / 1920));
-  em {
-    color: #f00 !important;
+  .three {
+    margin-bottom: calc(100vw * (10 / 1920));
+
+    em {
+      color: #f00 !important;
+    }
   }
-}
 </style>
 <style scoped lang='scss'>
-.containe {
-  color: #7ea4c8;
-  font-size: 0.14rem;
-  font-family: PingFang SC-Medium, PingFang SC;
-  font-weight: 500;
-  .picture {
-    width: calc(100vw * (220 / 1920));
-    height: calc(100vh * (57 / 1080));
-    margin-left: calc(100vw * (860 / 1920));
-    margin-top: calc(100vh * (100 / 1080));
-    margin-bottom: calc(100vh * (40 / 1080));
-    img {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-  }
-  .search {
-    width: calc(100vw * (864 / 1920));
-    height: calc(100vh * (50 / 1080));
-    margin-left: calc(100vw * (528 / 1920));
-    margin-bottom: calc(100vh * (50 / 1080));
-    position: relative;
-    .cen—top-img {
-      width: calc(100vw * (24 / 1920));
-      height: calc(100vh * (24 / 1080));
-      position: absolute;
-      left: calc(100vw * (15 / 1920));
-      top: calc(100vh * (15 / 1080));
-    }
-    .el-input {
-      width: calc(100vw * (750 / 1920));
-      height: calc(100vh * (50 / 1080));
-      margin-right: calc(100vw * (14 / 1920));
+  .containe {
+    color: #7ea4c8;
+    font-size: 0.14rem;
+    font-family: PingFang SC-Medium, PingFang SC;
+    font-weight: 500;
+
+    .picture {
+      width: calc(100vw * (220 / 1920));
+      height: calc(100vh * (57 / 1080));
+      margin-left: calc(100vw * (860 / 1920));
+      margin-top: calc(100vh * (100 / 1080));
+      margin-bottom: calc(100vh * (40 / 1080));
+
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
     }
-    .cen—top-span {
-      display: inline-block;
-      width: calc(100vw * (100 / 1920));
+
+    .search {
+      width: calc(100vw * (864 / 1920));
       height: calc(100vh * (50 / 1080));
-      background: #2e8aecff;
-      color: #ffffffcc;
-      text-align: center;
-      line-height: calc(100vh * (50 / 1080));
-      &:hover{
-            cursor: pointer
-          }
-    }
-  }
-  .mains {
-    width: calc(100vw * (1450 / 1920));
-    height: calc(100vh * (670 / 1080));
-    // background: seagreen;
-    margin-left: calc(100vw * (230 / 1920));
-    overflow: auto;
-    .main-main {
-      width: calc(100vw * (1430 / 1920));
-      // height: calc(100vh * (220 / 1080));
-      padding: calc(100vh * (20 / 1080));
-      border-bottom: 1px dashed #083b61ff;
-      .one {
-        margin-bottom: calc(100vw * (10 / 1920));
-        color: #2e8aecff;
-        font-size: 14px;
-        text-decoration: underline;
+      margin-left: calc(100vw * (528 / 1920));
+      margin-bottom: calc(100vh * (50 / 1080));
+      position: relative;
+
+      .cen—top-img {
+        width: calc(100vw * (24 / 1920));
+        height: calc(100vh * (24 / 1080));
+        position: absolute;
+        left: calc(100vw * (15 / 1920));
+        top: calc(100vh * (15 / 1080));
       }
-      .two {
-        margin-bottom: calc(100vh * (10 / 1080));
-        display: flex;
-        .two1 {
-          margin-right: calc(100vw * (30 / 1920));
-        }
-        img {
-          vertical-align: middle;
+
+      .el-input {
+        width: calc(100vw * (750 / 1920));
+        height: calc(100vh * (50 / 1080));
+        margin-right: calc(100vw * (14 / 1920));
+      }
+
+      .cen—top-span {
+        display: inline-block;
+        width: calc(100vw * (100 / 1920));
+        height: calc(100vh * (50 / 1080));
+        background: #2e8aecff;
+        color: #ffffffcc;
+        text-align: center;
+        line-height: calc(100vh * (50 / 1080));
+
+        &:hover {
+          cursor: pointer
         }
       }
-      .four {
-        display: flex;
-        list-style: none;
-        padding: 0;
-        li {
-          //  width: calc(100vw * (62 / 1920));
-          //  height: calc(100vh * (24 / 1080));
-          border: 1px solid #ff9839ff;
-          background: #bba99240;
-          padding: 0 5px;
-          margin-right: calc(100vw * (5 / 1920));
+    }
+
+    .mains {
+      width: calc(100vw * (1450 / 1920));
+      height: calc(100vh * (670 / 1080));
+      // background: seagreen;
+      margin-left: calc(100vw * (230 / 1920));
+      overflow: auto;
+
+      .main-main {
+        width: calc(100vw * (1430 / 1920));
+        // height: calc(100vh * (220 / 1080));
+        padding: calc(100vh * (20 / 1080));
+        border-bottom: 1px dashed #083b61ff;
+
+        .one {
+          margin-bottom: calc(100vw * (10 / 1920));
+          color: #2e8aecff;
+          font-size: 14px;
+          text-decoration: underline;
+        }
+
+        .two {
+          margin-bottom: calc(100vh * (10 / 1080));
+          display: flex;
+
+          .two1 {
+            margin-right: calc(100vw * (30 / 1920));
+          }
+
+          img {
+            vertical-align: middle;
+          }
+        }
+
+        .four {
+          display: flex;
+          list-style: none;
+          padding: 0;
+
+          li {
+            //  width: calc(100vw * (62 / 1920));
+            //  height: calc(100vh * (24 / 1080));
+            border: 1px solid #ff9839ff;
+            background: #bba99240;
+            padding: 0 5px;
+            margin-right: calc(100vw * (5 / 1920));
+          }
         }
       }
     }
+
+    //滚动条样式
+    ::-webkit-scrollbar {
+      width: 3.5px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: rgba(0, 0, 0, 0);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #2e8aec;
+      border-radius: 3px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: #2e8aec;
+    }
   }
-  //滚动条样式
-  ::-webkit-scrollbar {
-    width: 3.5px;
-  }
-  ::-webkit-scrollbar-track {
-    background-color: rgba(0, 0, 0, 0);
-  }
-  ::-webkit-scrollbar-thumb {
-    background: #2e8aec;
-    border-radius: 3px;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: #2e8aec;
+
+  ::v-deep .el-input--medium .el-input__inner {
+    padding-left: calc(100vw * (50 / 1920));
+    background: #14265e80;
+    border: 1px solid #01d1ffff;
+    color: #7ea4c8ff;
   }
-}
-::v-deep .el-input--medium .el-input__inner {
-  padding-left: calc(100vw * (50 / 1920));
-  background: #14265e80;
-  border: 1px solid #01d1ffff;
-  color: #7ea4c8ff;
-}
-</style>
+</style>