先有如下場景 點選當前頁的某個按鈕跳轉到另外乙個頁面去，並將某個值帶過去
<el-button
type
="primary"
@click
="handleclick(2)"
el-button
>
1、第一種方法：拼接方式
methods：`,})}
對應路由配置：
獲取引數方式：
this.$route.params.id
這種方式傳參，頁面重新整理資料不會丟失。
2、第二種方法：params傳參
通過路由屬性中的name來確定匹配的路由，通過params來傳遞引數。
methods：})}//或者採用router-link
前往detail頁面
對應路由配置：
獲取引數方式：
this.$route.params.id
需要注意的是，params動態路由傳參，一定要在路由中定義引數，然後在路由跳轉的時候必須要加上引數，否則就是空白頁面。例如，
//定義的路由中，只定義乙個id引數
//template中的路由傳參，
//傳了乙個id引數和乙個token引數
//id是在路由中已經定義的引數，而token沒有定義
前往detail頁面
//在詳情頁接收
created ()
三、第三種方法：query傳參
使用path來匹配路由，然後通過query來傳遞引數，這種情況下 query傳遞的引數會顯示在url後面?id=？
methods：})}
對應路由配置：
獲取引數：
this.$route.query.id
四、總結：params和query中的區別
1、接收方式
2、路由展現方式
VueRouter 路由傳參
語法 演示 首頁 路由配置 const routes 注釋 id 代表id是乙個變數，值會儲存在元件例項的 route.params上 在元件上取引數的值 let home 演示 methods 路由配置 const routes 注釋 id 代表id是乙個變數，值會儲存在元件例項的 route.p...
vue router路由傳參
vue router路由傳參有兩種方法 1 params傳參 2 query傳參 用params傳參，f5強制重新整理引數會被清空，用query傳參，由於引數適用路徑傳參的所以f5強制重新整理也不會被清空。傳參強烈建議適用string import articleindex from pages t...
vue router 路由傳參
路由傳引數。在很多時候我們需要路由上面傳遞引數，比如新聞列表頁，我們需要傳遞新聞id，給新聞詳細頁。1.新聞列表頁模板 我們訪問 news 001，跳轉到新聞詳細頁，展示001的這條新聞。2.新聞詳細頁元件準備 新聞詳細頁面 route.params.id獲取路由上的引數 在js裡定義路由元件 新聞...