一.vue路由傳值

在日常使用vue操作時，某些場景需要用到路由之間的傳值，就是在使用router跳轉(zhuǎn)到另外一個路由時需要攜帶參數(shù)一并傳過去，這時候就需要用到路由傳值

這里用舉例的形式展示幾種方法：

先來看看router文件

const routes = [{
? ? path: '/',
? ? component: A
? },
? {
? ? path: '/B',
? ? component: B
? },
]

在這里我們需要在A路由跳轉(zhuǎn)到B路由并攜帶一些值過去

方法一：（問號傳值）

在A路由中定義事件或使用<router-link>，這里使用事件展示：

this.$router.push("B?id=1");

在B路由中獲取傳遞的值：

console.log(this.$route.query.id);

方法二：query（此方法query的值會顯示在地址欄中）

在A路由中定義事件或使用<router-link>，這里使用事件展示：

?this.$router.push({
? ? ? ? path: "B",
? ? ? ? query: {
? ? ? ? ? id: 1,
? ? ? ? ? name: "litiezhu",
? ? ? ? },
? ? ? });

query方式與方法一一樣，在B組件中都是通過query方法獲取值：

console.log(this.$route.query);

此時頁面開發(fā)者工具中的Console中顯示：

{id: 1, name: 'litiezhu'}

方法三：params（此方法頁面刷新數(shù)據(jù)會丟失）

在A路由中定義事件或使用<router-link>，這里使用事件展示，name必須與router文件定義的name名稱一樣：

this.$router.push({
? ? ? ? path: "B",
? ? ? ? params: {
? ? ? ? ? id: 1,
? ? ? ? ? name: "litiezhu",
? ? ? ? },
});

在B組件中通過params方法獲取值：

console.log(this.$route.params);

方法四：動態(tài)路由（此方法頁碼刷新數(shù)據(jù)不會丟失,推薦此方法?。?/h3>

1.配置router文件

const routes = [{
? ? path: '/',
? ? component: A
? },
? {
? ? path: '/B/:id',
? ? component: B
? },
]

2.在需要跳轉(zhuǎn)的頁面中

this.$router.push(/B/1);

3.在B組件中通過params方法獲取值：

console.log(this.$route.params.id);

4.此時url地址顯示為：

http://localhost:8080/#/B/1

二.重調(diào)本路由改變參數(shù)

有時候需要改變自己路由的參數(shù)來達到自己重調(diào)自己，舉個例子：

小說網(wǎng)站的點擊上下章節(jié)切換

其實就是在內(nèi)部的單擊事件中重調(diào)了自己的路由，不過傳遞的值不一樣,點擊后地址變?yōu)椋?/p>

1.使用query方法，而不用再path指定路徑了：

this.$router.push({ query: { id: 2 } });

url地址顯示為：

http://localhost:8080/#/B/1?id=2

2.使用params方法，同樣也不用再path指定路徑了：

this.$router.push({ params: { id: 2 } })

url地址顯示為：

http://localhost:8080/#/B/2

若要實現(xiàn)點擊上下章切換不同的小說內(nèi)容的功能，可以將query的id值進行加減，并重新調(diào)用后端接口獲取數(shù)據(jù)來實現(xiàn)功能。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論