vue页面跳转传参

需求场景：搜索时点击搜索按钮跳转到搜索页面并带搜索关键字。如下图：

方式1：字符串传参：

1.params传参：不带问号，地址栏占位。

先在路由配置如下：

{
            path:'/search/:keyword',
            component:Search,
            meta:{footShow:true}
        },

页面如下： 

<div class="searchArea">
        <form action="###" class="searchForm">
          <input
            type="text"
            id="autocomplete"
            class="input-error input-xxlarge"
            v-model="keyword"
          />
          <button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
            搜索
          </button>
        </form>
      </div>

上图v-model的keyword是表单输入框绑定的关键字，点击搜索按钮跳转并传参。

methods:{
    goSearch(){
      // 字符串传参,params方式：不带问号，地址栏占位。
      this.$router.push('/search/' + this.keyword)
    }
  }

结果：

 2.query传参：带问号，地址栏不占位。

goSearch(){

      // 字符串传参,query方式：带问号，地址栏不占位。
      this.$router.push('/search/' + "?k=" + this.keyword)
      
    }

结果：

 方式2：对象方式传参：

首先得在路由配置name属性：如下图配置name属性为：search

{
            path:'/search/:keyword',
            component:Search,
            meta:{footShow:true},
            name:"search"
        },

goSearch(){
      // 对象方式传参params
      this.$router.push({
        name:'search',
        params:{
          keyword:this.keyword,
        }
      })
      
    }

this.$router.push({
        path:'/search',
        query:{
          k:this.keyword,
        }
      })

结果：

注意：如果对象形式传参，params方式要用name属性，而query方式要用path属性、

写在最后：如果params参数不传递（传空字符串）：

需要在路由配置时path后面加上问号(问号代表可传可不传)，如下：

{
            path:'/search/:keyword?',
            component:Search,
            meta:{footShow:true},
            name:"search"
        },

传递方法如下：

 this.$router.push({
        name:'search',
        params:{
          keyword:''|| undefined ,
        }
      })