路由传参方式

一、路由的跳转方式

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

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

  • params参数
  • query参数

2.1.params参数

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

2.2.query参数

  • 不属于路径当中的一部分，类似于get请求，地址栏表现为 /search?k1=v1&k2=v2，不需要占位

三、路由传参

3.1.声明式导航传参

搜索

搜索

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参数），但是路由跳转的时候就不传递。

  • 这个写法，真实的是：http://localhost:8080/#/?k=HHH
  • 正确路径，应该的是：http://localhost:8080/#/search/?k=HHH
  • 如果路由要求传params参数，但是你没传params参数，发现url会有问题

如何指定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参数可以传递可以不传递，但是如果传递为空字符串，如何解决？

  • 这个写法，真实的是：http://localhost:8080/#/?k=， 路径没有/search

  • 正确路径，应该的是：http://localhost:8080/#/search?k=

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

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

  • 可以，见3.4
vue实战问题

相关

标签