13,子路由搭建和搜索详情

业务流程点击搜索框  到搜索页  再到详情页

 header.vue 面里  给 框一个

@click="goSearch"

methods: {

    goSearch() {

      this.$router.push("/search");

    },

  },

到搜索页  search   然后 router-view到 search-index.vue页    

点击搜索  到 search  里面的header  里面 

 给搜索一个点击事件@click="goSearchList"

（@click="goBack"  返回事件）

methods: {
    goBack() {
      this.$router.back();
    },
    goSearchList() {
      this.$router.push({
        name: "list",
      });
    },
  },

俱体如下：

search 路由下新建：

search.vue 内容移到 search-index.vue

 search-index.vue:

<template>
  <div class="search-index">
    <Header />
    <section>
      <div class="search-history">
        <h2>
          <i class="iconfont icon-shijian"></i>
          <span>历史搜索</span>
          <span>清空历史搜索</span>
        </h2>
        <ul>
          <li>茶叶</li>
          <li>茶叶</li>
          <li>茶叶</li>
          <li>茶叶</li>
          <li>茶叶</li>
          <li>茶叶</li>
          <li>茶叶</li>
        </ul>
      </div>
    </section>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/components/search/Header.vue";

export default {
  components: {
    Tabbar,
    Header,
  },
};
</script>

<style scoped>
.search-index {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section {
  flex: 1;
  overflow: hidden;
  background-color: #f5f5f5;
  overflow: hidden;
}

.search-history h2 {
  position: relative;
  padding: 20px;
  font-weight: 400;
  font-size: 0.48rem;
}
.search-history h2 i {
  color: red;
  padding-right: 0.08rem;
  font-size: 0.48rem;
}
.search-history h2 span:last-child {
  position: absolute;
  top: 0.7333rem;
  right: 0.32rem;
  font-size: 0.32rem;
}
.search-history ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0.53333rem 0;
}
.search-history ul li {
  border: 1px solid #ccc;
  font-size: 0.3733rem;
  margin: 0.2667rem;
  padding: 0.08rem 0.16rem;
}
</style>

 search-list.vue:

<template>
  <div class="search-list">
    <div class="headers">
      <Header />
      <ul>
        <li><div>综合</div></li>
        <li>
          <div>价格</div>
          <div class="search-filter">
            <i class="iconfont icon-jiantoushang"></i>
            <i class="iconfont icon-jiantouxia"></i>
          </div>
        </li>
        <li>
          <div>销量</div>
          <div class="search-filter">
            <i class="iconfont icon-jiantoushang"></i>
            <i class="iconfont icon-jiantouxia"></i>
          </div>
        </li>
      </ul>
    </div>
    <section>
      <ul>
        <li>
          <img src="../../assets/images/s11.png" alt="云南凤庆经典蜜香滇红" />
          <h3>绿茶早春珍稀白茶礼盒</h3>
          <div class="price">
            <div>
              <span>#</span>
              <b>23+</b>
            </div>
            <div>立即购买</div>
          </div>
        </li>
        <li>
          <img src="../../assets/images/s11.png" alt="" />
          <h3>绿茶早春珍稀白茶礼盒</h3>
          <div class="price">
            <div>
              <span>#</span>
              <b>23+</b>
            </div>
            <div>立即购买</div>
          </div>
        </li>
        <li>
          <img src="../../assets/images/s4.jpeg" alt="" />
          <h3>绿茶早春珍稀白茶礼盒</h3>
          <div class="price">
            <div>
              <span>#</span>
              <b>23+</b>
            </div>
            <div>立即购买</div>
          </div>
        </li>
        <li>
          <img src="../../assets/images/s2.jpeg" alt="" />
          <h3>绿茶早春珍稀白茶礼盒</h3>
          <div class="price">
            <div>
              <span>#</span>
              <b>23+</b>
            </div>
            <div>立即购买</div>
          </div>
        </li>
        <li>
          <img src="../../assets/images/s3.jpeg" alt="" />
          <h3>绿茶早春珍稀白茶礼盒</h3>
          <div class="price">
            <div>
              <span>#</span>
              <b>23+</b>
            </div>
            <div>立即购买</div>
          </div>
        </li>
      </ul>
    </section>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/components/search/Header.vue";
export default {
  components: {
    Tabbar,
    Header,
  },
};
</script>

<style scoped>
.search-list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.headers ul {
  display: flex;
  justify-content: space-around;
  padding: 0.5333rem 0;
  font-size: 0.42rem;
}
.headers ul li {
  display: flex;
  align-items: center;
}
.headers ul li > div {
  padding: 0 0.08rem;
}
.headers ul li .search-filter {
  display: flex;
  flex-direction: column;
}
section {
  flex: 1;
  overflow: hidden;
}
section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
section ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  background-color: rgba(243, 239, 239, 0.4);
}
section ul li img {
  width: 4.53333rem;
  height: 4.53333rem;
}
section ul li h3 {
  font-size: 0.37rem;
  color: #333;
  line-height: 0.6rem;
  padding: 0.1rem 0 0rem;
  height: 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
section ul li .price {
  display: flex;
  justify-content: space-between;
  font-size: 0.32rem;
  padding: 0.2666rem 0;
  width: 80%;
}
section ul li .price div:first-child span {
  color: #b0352f;
  font-size: .32rem;
}
section ul li .price div:first-child b {
  color: #b0352f;
  font-size: 0.58rem;
}
section ul li .price div:last-child {
  padding: 0.08rem 0.16rem;
  border-radius: 0.2133rem;
  color: #fff;

  background-color: #b0352f;
}
</style>

解决一些问题

tabbar  改下路径