时间戳

首页 > 技术文章 > 路由传参方式

路由传参方式

jiajia-hjj 2022-01-17 17:14 原文

一、路由的跳转方式

  • 声明式导航：router-link，要有to属性
  • 编程式导航 ：$router.push|replace实现，可以处理一些业务

二、路由传参，参数有几种呢？

  • params参数
  • query参数

2.1.params参数

1、动态路由时传参

  • 属于路径当中的一部分，在配置路由的时候，需要占位。地址栏表现为 /search/v1
  • 刷新页面，参数还在
//占位：
path:'/search/:keyword',

2、非动态路由时传参

  • 不属于路径当中的一部分，类似 post请求，地址栏地址不变

  • 但是刷新参数数据会消失

  • params参数，跳转路由需要用：name

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

2.2.query参数

  • 不属于路径当中的一部分，类似于get请求，地址栏表现为 /search?k1=v1&k2=v2，不需要占位
  • 跳转路由需要用：name或path都可以。网上说要用path，但是自己测试都可以。
this.$router.push({
    path:'/search',
    query:{
        k1:this.v1,
        k2:this.v2
    }
});

三、路由传参

3.1.声明式导航传参

<router-link :to="'/search/'+keyword">搜索</router-link>
<!--http://localhost:8080/search/hhh-->
<router-link :to="{path: '/search', name: 'search', params: { keyword: hhh } }">搜索</router-link>

3.2.编程式导航

//1、字符串形式  this.$router.push('/search/'+this.keyword+'?k='+this.keyword.toUpperCase());
//2、模板字符串
this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);
//3、对象（常用），传的是对象，路由跳转传参params参数，需要路由配置文件给路由命个名 ==>name:'search'
this.$router.push({
    name:'search',
    params:{
        keyword:this.keyword
    },
    query:{
        k:this.keyword.toUpperCase()
    }
});
//http://localhost:8080/search/hh?k=HH
  • 对象（常用）：this.$router.push({name:“路由名字”,params:{传参},query:{传参})。
  • 以对象方式传参时，如果我们传参中使用了params，只能使用name，不能使用path，如果只是使用query传参，可以使用path

3.3.props

//router/inex.js
{
    name: "search",
    path: "/search/:keyword?",
    component: Search,
    meta: {
    	show: true,
    },
    //1、布尔值写法,props只能传params
    props:true
    //2、对象写法,额外给路由自己传递一些props
    props:{
        a:1,
        b:2
    }
    //3、函数写法，可以params参数、query参数，通过prop传递给路由组件(很少用)
    props:($route)=>{
        return{
            keyword:$route.params.keyword,
            k:$route.query.k
        }
    }
    props: ($route) => ({keyword: $route.params.keyword,k: $route.query.k,}),
},

//pages/Search/index.vue
//路由组件可以传递props
props:['keyword','a','b','k'],

四、路由传参相关问题

1、路由传递参数（对象写法）path是否可以结合params参数一起使用？

  • 路由跳转传参的时候，对象的写法可以是name、path形式，但是path的写法不可以和params参数一起使用。
  • （路径参数缺失是无法匹配path里面的占位符）
  • 因此，不能，传params-->对象写法，是要name的写法
this.$router.push({
    path:'/search',
    params:{keyword:this.keyword},
    query:{k:this.keyword.toUpperCase()}
});
//这个写法，真实的是==>http://localhost:8080/#/search?k=HH
//正确路径，应该的是：http://localhost:8080/#/search/hh?k=HH

2、如何指定params参数可以不传？

问题场景：配置路由的时候，已经占位了（params参数），但是路由跳转的时候就不传递。

如何指定params可以传递或者不传递？

解决：

  • 配置路由时，可以在占位符后面加个?【?代表可传或不传，正则的问号一次或多次】
//router/inex.js
{
    name:'search',
    path:'/search/:keyword?',
    component:Search,
}

this.$router.push({
    name:'search',
    // params:{keyword:this.keyword},
    query:{k:this.keyword.toUpperCase()}
});
//真实路径：http://localhost:8080/#/search?k=HHH

3、params参数可以传递可以不传递，但是如果传递为空字符串，如何解决？

//使用undefined解决：params参数可以传递，或不传递(传空字符串)
this.$router.push({
    name: "search",
    params: { keyword: ""||undefined },
    query: { k: this.keyword.toUpperCase() },
});

4、路由组件能不能传递props数据

  • 可以，见3.4

推荐阅读