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