Vue路由之間的引數是如何傳遞的

2021-10-09 11:49:53 字數 1952 閱讀 7402

query獲取引數

路由跳轉時攜帶引數：多個引數使用&符號連線起來

"/news?id=10"


>news10<


/router-link>
路由配置如下

獲取資料：$route.query.id

var news =}"


}
params獲取引數

路由跳轉時攜帶引數

"/news/10"


>news10<


/router-link>
需要對路由進行如下配置： 跳轉的路由後加上/:id，多個引數繼續按格式新增，資料按順序對應

獲取資料：$route.params.id

var news =}"


}
如果使用$route.params.id來獲取路徑傳參的資料不夠靈活，我們可以通過props來接收引數，接下來我們看看如何使用props獲取引數。

props獲取引數

1、引數比較少的時候，直接使用props接收資料，使用如下：

路由跳轉時攜帶引數

"/news/10"


>news10<


/router-link>
需要對路由進行如下配置：如果props設定為true，route.params將會被設定為元件屬性

獲取資料：把接收到的值放入props中，就可以直接使用

var news =}"


}
2、還有一種情況，我們可以將props設定為物件，那麼就直接將物件的資料傳遞給元件進行使用。

路由跳轉時攜帶引數

"/news/10"


>news10<


/router-link>
需要對路由進行如下配置：



}
獲取資料：

var user =


}---}


"}
但是如果props設定為物件，則傳遞的是物件中的資料給元件，那麼位址列中的引數值是獲取不到的，如果想要兩種資料都獲取到，則看接下來的第三種方式。

3、如果想要獲取傳遞的引數值還想要獲取傳遞的物件資料，那麼props應該設定為函式形式。

路由跳轉時攜帶引數

"/news/10"


>news10<


/router-link>
需要對路由進行如下配置：



)}
獲取資料：

var news =


}---}---}


"}
什麼是程式設計式路由呢? 就是通過js**實現頁面跳轉，有以下兩種常見的帶引數跳轉的形式：

1、router.push(})

路由配置：

觸發跳轉事件：

this


.$router.


push(}


)
獲取資料：

var lists =}"


}
2、router.push(})

路由配置：

觸發跳轉事件：

this


.$router.


push(}


)
獲取資料：

var lists =}"


}

vue路由傳遞引數

1.通過path來確定匹配的路由，通過query來傳遞引數 傳參 golist title,id 注意這裡是 router 接參 this.params.brandid this.route.query.id 這裡是 route2.通過路由屬性name確定匹配路由，通過params傳遞引數 傳參 g...

Vue 路由傳遞引數

vue 路由傳遞引數與 vue傳遞引數不同 vue router傳遞引數分為兩大類 程式設計式的導航 router.push 宣告式的導航 程式設計式的導航 router.push 程式設計式導航傳遞引數有兩種型別 字串 物件。字串字串的方式是直接將路由位址以字串的方式來跳轉，這種方式很簡單但是不能...

vue 路由傳遞引數

結構目錄 1.頁面傳值 不同之間的頁面傳值 1.1 index.js配置 原始碼 1 引入vue框架 2 import vue from vue 3 引入vue router路由依賴 4 import router from vue router 5 home 6 import home from ...