搜索功能（七）-搜索关键字页面跳转——回车触发跳转并通过？方式携带参数

关键字页面跳转——回车触发跳转并通过？方式携带参数

• 控制跳转-通过?携带参数

// 输入关键字后，回车触发跳转并携带参数
mpvue.navigateTo({
  url: '/pages/search_list/main?query=' + this.keyword
})

• 添加商品列表页面
• 商品列表页面获取路径参数

onLoad (param) {
  // 参数query表示路径传递过来的参数
  this.keyword = param.query
}

实例

回车键触发方法-完整代码

  methods: {
      toSearch () {
      // 回车时触发，跳转到商品列表页面并且缓存关键字
      // console.log('enter')
      // 把搜索历史关键字放到数组中
      this.hkw.unshift(this.keyword)
      // 数组去重操作
      this.hkw = [...new Set(this.hkw)]
      // 再把数组放到缓存中
      wx.setStorageSync('history', this.hkw)
      // 控制页面跳转到商品列表页面
      wx.navigateTo({
            //携带输入的关键字参数  进行跳转   跳转路径拼接
        url: '/pages/search_list/main?kw=' + this.keyword
      })
    },
  }     

第一步：在pages文件夹下，新建目录searc_list搜索页面文件夹

第二步：在search_list下，

新建main.js文件，内容固定

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

新建模板文件index.vue

<template>
	<div>搜索列表</div>
</template>
<script>
	export default{
		data(){
			return{}
		}
	}
</script>

第三步：在src/app.json中配置路径

  "pages": [
    "pages/home/main",
    "pages/cate/main",  
    "pages/cart/main",  
    "pages/my/main",
    "pages/search/main",
    "pages/search_list/main"
  ],

第五步：新建文件，项目要重启 npm run dev

在输入框中输入 关键字，回车，页面实现了跳转

携带参数

<template>
	<div>{{kw}}</div>
</template>
<script>
export default{
	data(){ 
        return{
			kw:''
        }
    },
    onLoad(param){
        // 页面跳转路由参数的获取
		 //  console.1og(param)
	    this. kw=param. kw
    }
}
</script>

携参跳转验证：搜索关键字传递到了另一个页面