【Vue3从零开始-实战】S14：详情页回退事件及路由参数的传递获取数据

前言

实战已经开始了！上一篇已经将详情页的店铺信息展示出来了，但是顶部还有一个搜索框和返回按钮，而且详情页的店铺数据是在页面中固定写死的，所以本章节会将顶部搜索栏进行布局，并且通过返回按钮可以回到首页。其次会通过路由传参的方式，从首页跳转到详情页，并动态获取详情页店铺数据。

搜索框布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KjGtO7qf-1658392912044)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e3b726e095d4e67a81837f09830ffc7~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

🌀 根据稿图，我们发现搜索框部分只有一个input输入框和一个返回按钮，比较简单，所以下面就直接贴代码了，有兴趣的朋友可以自己设计的哦。

👉 DOM元素

<div class="search">
  <div class="search__back iconfont">&#xe6f2;</div>
  <div class="search__content">
    <span class="search__content__icon iconfont">&#xe62d;</span>
    <input class="search__content__input" placeholder="请输入商品名称" />
  </div>
</div> 

👉 样式

.search {
  display: flex;
  margin: .2rem 0 .16rem 0;
  line-height: .32rem;
  &__back {
    width: .3rem;
    font-size: .24rem;
    color: #B6B6B6;
  }
  &__content {
    display: flex;
    flex: 1;
    background: #F5F5F5;
    border-radius: .16rem;
    &__icon {
      width: .44rem;
      text-align: center;
      color: #B7B7B7;
    }
    &__input {
      display: block;
      width: 100%;
      padding-right: .2rem;
      border: none;
      outline: none;
      background: none;
      height: .32rem;
      font-size: .14rem;
      color: #333;
      &::placeholder {
        color: #333;
      }
    }
  }
} 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rICW8HzB-1658392912045)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3474d62f07842e