vue 之url拼接 根据选择条件动态修改url地址

本文介绍了一个Vue项目中如何根据选择条件动态修改URL地址的实现,涉及区域、类型、均价和户型的选择,并提供了代码示例和GitHub项目链接。作者提到,虽然简单地使用query可以解决问题,但为了满足特定需求,选择了更复杂的方法。
摘要由CSDN通过智能技术生成

vue 之url拼接 根据选择条件动态修改url地址
这里写的是某个项目中的一部分实现代码。。

如果需要学习 常见的动态路由可以看这篇文章:https://blog.csdn.net/ws19900201/article/details/101783689

终于有勇气再看一遍自己写的代码了,上个月月底 和这个月月初停了大概一周半的时间没有更新文章,一直在研究一个 ‘根据选择条件动态修改url地址’ 的问题。。这并不是常见的那种简单的动态修改路由,要根据选择的区域、类型、均价、户型来动态修改路由,(就是仿照搜狐焦点选择条件这样修改路由,可以看一下搜狐焦点)。。

git参考地址:https://github.com/Happyjingjing/zh7gfang

其实简单方法直接在路由后面写query 就解决的问题,非要搞的这么复杂。。没办法,只好挑战一下了。。

初始地址:
在这里插入图片描述
选择条件后确定(路由变为根据选项拼接状态):
在这里插入图片描述
代码: .less 什么的就不多说了。。可以看我上传的git代码 或者留言,我看到会解答。。

项目描述:点击选项置顶弹层式打开,页面禁止滚动,点击空白关闭选项弹层,页面可以滚动;
.vue:

<div class="searchsub" v-wechat-title="this.nowplace + '新房'">
    <menulist :ismenutop="false" />
    <div class="searchhead clearfix">
      <search
        @searchwordfu="searchwordfu"
        :searchword="searchword"
        :isbackcolor="isbackcolor"
      />
      <p class="mapsearch">
        <router-link :to="{ name: 'maphouse' }">
          <i></i>
          地图找房
        </router-link>
        <!-- <a href="http://m.xihuanfang.com/index.php?caid=2&addno=1#index_section">
          <i></i>
          地图找房
        </a> -->
      </p>
    </div>
    <div
      class="searchsubbox"
      id="fixedBar"
      :class="{ fixedBar: isFixed, navtopfix: istopfix }"
      @click.stop="fixblank"
    >
      <ul class="searchul">
        <li @click.stop="getSonAreaListData" :class="{ on: quyudownshow }">
          <p>
            <span>区域</span>
            <i></i>
          </p>
        </li>
        <li @click.stop="getPriceListData" :class="{ on: jiagedownshow }">
          <p>
            <span>均价</span>
            <i></i>
          </p>
        </li>
        <li @click.stop="getapartmentListData" :class="{ on: huxingdownshow }">
          <p>
            <span>户型</span>
            <i></i>
          </p>
        </li>
      </ul>
      <div class="seardownbox" v-show="quyudownshow">
        <div class="downsel">
          <ul class="lefsel">
            <li
              :class="{ on: index == onidx }"
              v-for="(item, index) in seltype"
              :key="index"
              @click.stop="qucli(index)"
            >
              {
  { item }}
            </li>
          </ul>
          <ul class="rigsel" v-show="quyushow">
            <li
              v-for="(item, index) in quyuList"
              :key="item.id"
              :class="{ on: index == qulion }"
              @click.stop="quyubtn(item.id)"
            >
              {
  { item.name }}
            </li>
          </ul>
          <ul class="rigsel" v-show="quyushow == false">
            <li
              v-for="(item, index) in typeList"
              :key="item.id"
              :class="{ on: index == tylion }"
              @click.stop="typebtn(item.id)"
            >
              {
  { item.title }}
            </li>
          </ul>
        </div>
        <div class="bombox">
          <p class="reset" @click.stop="reset">重置</p>
          <p class="define" @click.stop="define">确定</p>
        </div>
      </div>

      <div class="seardownbox" v-show="jiagedownshow">
        <div class="downsel">
          <ul class="lefsel">
            <li class="on">单价</li>
          </ul>
          <ul class="rigsel jiage">
            <li
              v-for="(item, index) in priceList"
              :key="item.p_id"
              :class="{ on: index == prilion }"
              @click.stop="pricebtn(item.p_id)"
            >
              {
  { item.price }}
            </li>
          </ul>
        </div>
        <div class="bombox">
          <p class="reset" @click.stop="reset">重置</p>
          <p class="define" @click.stop="define">确定</p>
        </div>
      </div>

      <div class="seardownbox" v-show="huxingdownshow">
        <div class="downsel">
          <ul class="rigsel huxing">
            <li
              v-for="(item, index) in huxingList"
              :key="item.h_id"
              :class="{ on: huxlion[index] == 1 }"
              @click.stop="huxingbtn(item.h_id)"
            >
              {
  { item.jushi }}
            </li>
          </ul>
        </div>
        <div class="bombox">
          
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值