vue路由傳參的幾種基本方式

2022-07-24 09:42:08 字數 507 閱讀 4100

1、動態路由(頁面重新整理資料不丟失)

methods:`,

})}

路由配置

接收頁面通過  this.$route.params.id 接收

this.$route.params.id

2、路由 name 匹配,通過params傳參

methods:

})}

路由配置

也是通過   this.$route.params.id 接收引數

3、路由path路徑匹配,然後通過query來傳遞引數,這種情況下 query傳遞的引數會顯示在url後面?id=?

methods:

})}

路由配置

通過this.$route.query.id 接收引數

vue路由傳參的幾種基本方式

現有如下場景,點選父元件的li元素跳轉到子元件中,並攜帶引數,便於子元件獲取資料。父元件中 for article in articles click getdescribe article.id methods getdescribe id 方案一,需要對應路由配置如下 很顯然,需要在path中新...

vue路由傳參的幾種方式

方案1 url表現為 直接呼叫 router.push 實現攜帶引數的跳轉 this.router.push 方案1,需要對應路由配置如下 很顯然,需要在path中新增 id來對應 router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值。this.route.params...

vue路由傳參的三基本方式

場景 點選當前頁的某個按鈕跳轉到另外乙個頁面去,並將某個值帶過去 三種基本方式 1 頁面重新整理資料不會丟失 methods 需要對應路由配置如下 需要在path中新增 id來對應 router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值 另外頁面獲取引數如下 this.r...