本文主要介紹了vue中使用路由進行頁面的跳轉時,vue的路由如何傳遞引數,第二個頁面如何獲取引數.

一. 通過router-link進行跳轉

<router-link
:to="{
path: 'yourPath',
    params: {
    name: 'name',
        dataObj: data
},
query: {
    name: 'name',
        dataObj: data
}
}">
</router-link>

1. path -> 是要跳轉的路由路徑,也可以是路由檔案裡面配置的 name 值,兩者都可以進行路由導航
2. params -> 是要傳送的引數,引數可以直接key:value形式傳遞
3. query -> 是通過 url 來傳遞引數的同樣是key:value形式傳遞

二. 通過程式設計導航 $router進行路由跳轉

1.路徑後拼接引數

通過路徑後直接拼接來傳遞引數

getDescribe(id) {
// 直接呼叫$router.push 實現攜帶引數的跳轉
        this.$router.push({
          path: `/describe/${id}`,
        })

對應路由配置
注意:此方法需要修改對應路由配置,需要在path中新增/:id來對應 $router.push 中path攜帶的引數。

 {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

獲取傳遞的引數值

this.$route.params.id

2. 通過params來傳遞引數

傳遞引數
通過路由屬性中的name來確定匹配的路由，通過params來傳遞引數。

 this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })

對應路由配置

{
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

獲取引數

this.$route.params.id

3. 通過query來傳遞引數

傳遞引數
使用path來匹配路由，然後通過query來傳遞引數
這種情況下 query傳遞的引數會顯示在url後面?id=？

this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

對應路由配置

 {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

獲取引數

this.$route.query.id

注意:此處不是$router,而是$route,沒有”r”

更為清爽的瀏覽體驗,請移步我的個人部落格
天心天地生的個人部落格

技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這裡是技能樹.IT修真院，成千上萬的師兄在這裡找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧~
憑邀請碼註冊可享受學費減免優惠
我的邀請碼：25344308 ，或者你可以直接點選此連結：
修真院註冊連結