vue-router中的query和params

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情 >>

vue-router中的query和params都是跳转url时传递的参数。query相当于get请求的传递参数，parmas相当于resful中的参数（后台的参数）；query可以通过name和path传递，params只能通过name传递

router和route

• router是vue-router的一个只写的路由操作对象，想要跳转路由需要用router.push方法。通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性

• route是一个只读的路由信息对象，是当前router的跳转对象。每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、path、params、query......

query和params

• query（定义path即可）
  • 下述代码url：http://localhost:8080/#/xxx?id=123&name=query

//通过$router传参,$route.query.id接收参数
this.$router.push({
  path:'/xxx',
  query: {
    id:'123',
    name:'query'
  }
})

• params（需要定义path和name）
  • 下述代码url：http://localhost:8080/#/xxx/456/params
  • params传参再刷新页面或跳转到其他页面的时候参数会丢失，可以在路由中加上被传递的参数即可

//通过$router传参,$route.params.id接收参数
this.$router.push({
  name:'xxx',  //params传参只能用name
  params: {
    id:'456',
    name:'params'
  }
})

// router/index.js
......
{
  path:'/xxx/:id/:name'
  ......
}
......

• 区别
  • query传参可以用name和path两种；params只能用name，如果在params中用path接收页面的参数会是undefined；且path的值只能是'/xxx'，name的值只能是'xxx'
  • query的参数用?拼接在url后面；params的参数属于路由的一部分
  • query相当于get请求，页面跳转的时候参数在url当中显示，再刷新页面或跳转到其他页面的时候参数不会丢失；params相当于post请求，页面跳转的时候参数不会在url中显示，再刷新页面或跳转到其他页面的时候参数会丢失