vue页面跳转传参

Math.random( ) ;

已于 2022-01-28 13:30:59 修改

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

于 2022-01-28 12:10:02 首次发布

本文链接：https://blog.youkuaiyun.com/xcxcsdn/article/details/122728354

版权

本文详细介绍了在Vue中如何进行页面跳转并传递参数，包括使用params和query两种方式。对于params，不带问号且在地址栏占位；对于query，带问号且不占位。同时强调了当使用对象方式传参时，params需要name属性，而query则需path属性。文章还提到，若params传递空字符串，路由配置的path应加问号表示可选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

方式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 ,
        }
      })