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

2022-06-23 21:15:09 字數 3576 閱讀 4652

現有如下場景，點選父元件的li元素跳轉到子元件中，並攜帶引數，便於子元件獲取資料。

父元件中：

for="article in articles" @click="getdescribe(article.id)">
methods：

getdescribe(id) `,


})
方案一，需要對應路由配置如下：
很顯然，需要在path中新增/:id來對應 $router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值。

this.$route.params.id
父元件中：通過路由屬性中的name來確定匹配的路由，通過params來傳遞引數。

this.$router.push(


})
對應路由配置: 注意這裡不能使用:/id來傳遞引數了，因為父元件中，已經使用params來攜帶引數了。
子元件中: 這樣來獲取引數

this.$route.params.id
父元件：使用path來匹配路由，然後通過query來傳遞引數

這種情況下 query傳遞的引數會顯示在url後面?id=？

this.$router.push(


})
對應路由配置：
對應子元件: 這樣來獲取引數

this.$route.query.id
1、用法上的剛才已經說了，query要用path來引入，params要用name來引入，接收引數都是類似的，分別是this.$route.query.name和this.$route.params.name。

注意接收引數的時候，已經是$route而不是$router了哦！！

2、展示上的

query更加類似於我們ajax中get傳參，params則類似於post，說的再簡單一點，前者在瀏覽器位址列中顯示引數，後者則不顯示。

檔案結構

定義路由：在定義path路由路徑時定義引數名和格式，如  path: "/one/login/:num" ，router>index.js檔案如下

/* eslint-disable*/


//第一步：引用vue和vue-router ，vue.use（vuerouter）


import vue from 'vue'


import router from 'vue-router'


vue.use(router)


//第二步：引用定義好的路由元件


import childone from '../components/childone'


import childtwo from '../components/childtwo'


import log from '../components/log.vue'


import reg from '../components/reg.vue'


//第三步：定義路由（路由物件包含路由名、路徑、元件、引數、子路由等），每乙個路由對映到乙個元件


//第四步：通過new router來建立router例項


export default new router(,,],


},]})
在父路由元件上使用router-link進行路由導航，傳參用的形式向子路由元件傳遞引數。使用router-view進行子路由頁面內容渲染，父路由元件childone.vue 如下：

這是父路由childone對應的元件頁面


下面可以點選顯示巢狀的子路由 


顯示登入頁面


顯示註冊頁面
子路由通過 this.$route.params.num 的形式來獲取父路由向子路由傳遞過來的引數，子路由元件login.vue如下：

登入介面：這是另乙個巢狀路由的內容
效果：

注意：如上所述路由定義的path: "/one/login/:num"路徑和to="/one/login/001"必須書寫正確，否則不斷點選切換路由，會因為不斷將傳遞的值顯示新增到url中導致路由出錯，如下：

傳遞的值存在url中存在安全風險，為防止使用者修改，另一種方式不在url中顯示傳遞的值

定義路由時新增name屬性給對映的路徑取乙個別名，router>index.js檔案修改router如下：

export default new router(,,],


},]})
在父路由元件上使用router-link進行路由導航，使用   形式傳遞引數。注意   ': to= ' 前面的冒號，childone.vue元件修改如下：

這是父路由childone對應的元件頁面


下面可以點選顯示巢狀的子路由 


顯示登入頁面


顯示註冊頁面
子路由元件頁面獲取父路由傳參方式不變，reg.vue 檔案如下：

登入介面：這是另乙個巢狀路由的內容
注意：上述這種利用params不顯示url傳參的方式會導致在重新整理頁面的時候，傳遞的值會丟失；定義路由 router>index.js檔案如下：

export default new router(,,],


},]})
修改路由導航 ，childone.vue 檔案修改如下：

這是父路由childone對應的元件頁面


下面可以點選顯示巢狀的子路由 


顯示登入頁面


顯示註冊頁面
子路由元件通過 this.$route.query.num 來顯示傳遞過來的引數，reg.vue 檔案如下：

註冊介面：這是二級路由頁面
效果如下：

ps: 在第一步的定義路由中我們都使用了mode：history 作用就是去除路由跳轉時路由路徑前的 「#」

預設為hash模式，最明顯的標誌是，url上有#號 localhost:8080/#/，路由會監聽#後面的資訊變化進行路由匹配

另一種為history模式，不會有#出現，很大程度上對url進行了美化。需要**注意**history模式在打包後的路由跳轉需要伺服器配合

預設不使用mode：history 如下

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

1 動態路由 頁面重新整理資料不丟失 methods 路由配置 接收頁面通過 this.route.params.id 接收 this.route.params.id 2 路由 name 匹配，通過params傳參 methods 路由配置 也是通過 this.route.params.id 接收引...

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...