Vue3+vant+vue-router商城搜索跳转商品搜索页

需求：首页搜索商品回车，跳转商品搜索页，搜索框中内容仍然存在，并且重新输入内容，路由参数随之改变。

首页：

 回车后跳转：

 搜索框输入内容路由地址随之改变：

 步骤：

1. 路由：

// 路由规则配置
const routes = [
  // 其他路由略
  {
    path: '/search/:kw',
    name: 'search',
    component: () => import('@/views/search/index.vue'),
    props: true
  }
]

2. 主页搜索

     <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />

用vant组件库的@search，search 事件在点击键盘上的搜索/回车按钮后触发

import { useRouter } from 'vue-router'
const router = useRouter()
// 搜索事件
const onSearch = (val) => {
  // Toast(val) 用此检测val传值是否成功
  if (!val) {
    return
  } else {
    router.push({
      name: 'search',
      params: {
        kw: val
      }
    })
  }
}

3. search页面

<template>
  <div class="main">
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
    >
      <template #title>
        <van-search
          v-model="myKw"
          shape="round"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onClickButton">
              搜索
            </div>
          </template>
        </van-search>
      </template>
    </van-nav-bar>
  </div>
</template>

import { computed } from '@vue/reactivity'
import { useRoute, useRouter } from 'vue-router'

// 返回上一页
const onClickLeft = () => history.back()
const route = useRoute()
const router = useRouter()
// get获取路由参数，在set中把最新传递过来的搜索关键词进行路由重定向
const myKw = computed({
  get: () => {
    let { kw } = route.params
    console.log(kw)
    return kw
  },
  set: (val) => {
    router.push({
      name: 'search',
      params: {
        kw: val
      }
    })
  }
})