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

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

首页：

 回车后跳转：

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

 步骤：

1. 路由：

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

2. 主页搜索

用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页面

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.paramsconsole.log(kw)return kw},set: (val) => {router.push({name: 'search',params: {kw: val}})}
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！