vue带参数跳转新页面,怎么获取参数并实现搜索功能?

新手上路,请多包涵

页面跳转之后怎么自动根据这个参数渲染数据出来?不需要点击按钮才执行方法吗??
怎么根据传过来的search进行搜索呀》??
image.png
created() {

this.pageList();
this.getparam();

},

<el-row class="elrow">

  <el-col
    :span="8"
    class="nav-link"
    v-for="(topic, index) in searchData"
    :key="index"
  >
    <div class="row">
      <div>
        <router-link :to="{ name: 'topic_show', params: { id: topic.id } }">
          <img :src="$host + topic.img_url" class="topic-img" />
        </router-link>
      </div>

      <router-link
        class="text"
        :to="{ name: 'topic_show', params: { id: topic.id } }"
      >
        <div class="text">
          {{ topic.content }}
        </div>
      </router-link>

      <div class="oldprice">
        原价
        <del style="color: black">¥{{ topic.oldprice | getArea }}</del>
      </div>
      <div class="price">¥{{ topic.price | getArea }}</div>
      <button class="btn" :topic_id="topic" @click="addsave(topic)">
        加入购物车
      </button>
    </div>
  </el-col>
</el-row>
阅读 2.8k
3 个回答
  1. 计算属性
  2. watch

你的代码看上去只是一个 methods 里面的方法,方法需要调用时机呀。

目前看上去是生命周期,created,那么你就需要保证会重新触发生命周期钩子函数

你这个this.pageList(); 里面应该写的是发送请求获取数据是异步的吧,你把你的 this.pageList(); 方法放到 this.pageList(); 返回结果之后在调用应该就可以了

要用到watch:'$route' ,说白话点就是监听url变化。

watch: {
'$route'(to, from) {
    //获取的你url参数
    this.search = this.$route.params.search
  }
}

然后页面初始化

 created() {
    //你的初始化请求方法,然后带参 this.search
 },
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题