Vue Router路由傳參三種方法及區(qū)別

1、梁枝賀第一種方法：拼接方式:

methods：{

handleClick(id) {//直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)

?this.$router.push({path: `/detail/${id}`,})

}

對(duì)應(yīng)路由配置：

{

path:'/detail/:id',

name:'detail',

component: detail

}?獲取參數(shù)方式：?this.$route.params.id

2、第二種方法：params傳參 （通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù)。）

methods：{

handleClick(id) {

this.$router.push({name:'detail', // 根據(jù)name確定匹配路由params: {id: id}})

}

//或者采用router-link前往Detail頁(yè)面

前往Detail頁(yè)面

對(duì)應(yīng)路由配置：

{

path:'/detail/:id',

name:'detail',

component: detail

}??獲取搭激參數(shù)方式：?this.$route.params.id

三、第三種方法：query傳參

使用path來匹配路由，然后通過query來傳橡派遞參數(shù)，這種情況下 query傳遞的參數(shù)會(huì)顯示在url后面?id=？

methods：{

handleClick(id) {

this.$router.push({path:'/detail',query: {id: id}})

}

對(duì)應(yīng)路由配置：

{

path:'/detail',

name:'detail',

component: detail

}? //獲取參數(shù)：this.$route.query.id

四、總結(jié)：params和query中的區(qū)別

1、接收方式

query傳參：this.$route.query.id

params傳參：this.$route.params.id

2、路由展現(xiàn)方式

query傳參：/detail?id=1&user=123&identity=1&更多參數(shù)

params傳參：/detail/123