欧美性videos高清精品,久久久无码精品午夜,国产精品久久久久久久久免费

vue使用路由進(jìn)行頁面跳轉(zhuǎn)時傳遞參數(shù)

2019-12-10 前端達(dá)人

一. 通過router-link進(jìn)行跳轉(zhuǎn)

<router-link

:to="{

path: 'yourPath',

params: {

name: 'name',

dataObj: data

},

query: {

name: 'name',

dataObj: data

}

}">

</router-link>

二. 通過編程導(dǎo)航 $router進(jìn)行路由跳轉(zhuǎn)

1.路徑后拼接參數(shù)

通過路徑后直接拼接來傳遞參數(shù)

getDescribe(id) {

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

this.$router.push({

path: /describe/${id},

})

對應(yīng)路由配置

注意:此方法需要修改對應(yīng)路由配置,需要在path中添加/:id來對應(yīng) $router.push 中path攜帶的參數(shù)。

{

path: '/describe/:id',

name: 'Describe',

component: Describe

}

獲取傳遞的參數(shù)值

this.$route.params.id

通過params來傳遞參數(shù)

傳遞參數(shù)

通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù)。

this.$router.push({

name: 'Describe',

params: {

id: id

}

})

對應(yīng)路由配置

注意這里不能使用:/id來傳遞參數(shù)了，因?yàn)橐呀?jīng)使用params來攜帶參數(shù)了。

{

path: '/describe',

name: 'Describe',

component: Describe

}

獲取參數(shù)

this.$route.params.id

1
通過query來傳遞參數(shù)

傳遞參數(shù)

使用path來匹配路由，然后通過query來傳遞參數(shù)

這種情況下 query傳遞的參數(shù)會顯示在url后面?id=？

this.$router.push({

path: '/describe',

query: {

id: id

}

})

對應(yīng)路由配置

{

path: '/describe',

name: 'Describe',

component: Describe

}

獲取參數(shù)

this.$route.query.id