案例
<!-- 傳 -->
this.$router.push({ name: 'anotherPage', params:{id: 1} })
<!-- 取 -->
this.$route.params.id
三種方法
方案一
<!-- 頁面 1 -->
<!-- 直接調(diào)用$router.push 實現(xiàn)攜帶參數(shù)的跳轉(zhuǎn) -->
this.$router.push({
path: `/page2/${id}`,
})
<!-- 路由配置 -->
<!-- 需要在path中添加/:id來對應(yīng) $router.push 中path攜帶的參數(shù)袋狞。在子組件中可以使用來獲取傳遞的參數(shù)值尚困。 -->
{
path: '/page2/:id',
name: 'page2',
component: page2
}
<!-- 頁面 2 -->
<!-- 獲取參數(shù) -->
this.$route.params.id
方案二
<!-- 父組件中：通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù) -->
this.$router.push({
name: 'page2',
params: {
id: id
}
})
<!-- 對應(yīng)路由配置: 這里可以添加:/id 也可以不添加，不添加數(shù)據(jù)會在url后面顯示默责，不添加數(shù)據(jù)就不會顯示 -->
{
path: '/page2',
name: 'page2',
component: page2
}
<!-- 獲取參數(shù) -->
this.$route.params.id
方案三
<!-- 頁面 1 -->
<!-- 父組件：使用path來匹配路由件余，然后通過query來傳遞參數(shù)
這種情況下 query傳遞的參數(shù)會顯示在url后面?id=笆环？ -->
this.$router.push({
path: '/page2',
query: {
id: id
}
})
{
path: '/page2',
name: 'page2',
component: page2
}
this.$route.query.id
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
