一：

getDescribe(id) { // 直接調用$router.push 實現攜帶參數的跳轉this.$router.push({path: `/describe/${id}`,})

方案一，需要對應路由配置如下：

{path: '/describe/:id',name: 'Describe',component: Describe}

很顯然，需要在path中添加/:id來對應 $router.push 中path攜帶的參數。在子組件中可以使用來獲取傳遞的參數值。

this.$route.params.id

二：

父組件中：通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數。

this.$router.push({name: 'Describe',params: {id: id}})

對應路由配置: 這里可以添加:/id 也可以不添加，不添加數據會在url后面顯示，不添加數據就不會顯示

{path: '/describe',name: 'Describe',component: Describe}

子組件中: 這樣來獲取參數

this.$route.params.id

三：

父組件：使用path來匹配路由，然后通過query來傳遞參數
這種情況下 query傳遞的參數會顯示在url后面?id=？

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

對應路由配置：

{path: '/describe',name: 'Describe',component: Describe}

對應子組件: 這樣來獲取參數

this.$route.query.id

總結

以上是生活随笔為你收集整理的vue路由传参的三种基本方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。