Vue router中攜帶參數與獲取參數

---

Vue路由路由參數傳遞的兩種方式

---

Query方式

Query方式即是url參數，例如/login?id=1

<router-link :to="{ name:'login',query:{id:1} }">登錄</router-link>

this.$router.push({
         path: '/login',
         query:{
               id:id,
          }
}）

Params方式

Params方式即是url路徑，例如/register/San

<router-link :to="{ name:'register',params:{'name':'San'} }">注冊</router-link>

this.$router.push({
         name: 'monitor',
         params:{
               id:id,
          }
}）

通過該方法配置的參數，需要在配置路由的時候給參數留個坑

---

目標頁面讀取參數

---

Query方式

this.$route.query.id

Params方式

this.$route.params.name