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

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=