vue中路由跳转传参query与params的区别

params

    • 只能使用命名的路由

    • 地址栏不可见,请求类似 localhost:4396/user

    • 在目标页面使用this.$route.params.id来获取

例:

router.push({
  name: 'user', 
  params: { 
    id: 123 
  }})

需要注意的是,使用params传值的话,目标页面刷新后就会丢失params的值。如果要保留的话,可在router.js中配置目标页面的path
例:

{
        path: 'user/:id',
        name: 'user',
        meta: {
          title: '参数'
        },
        component: () => import('@/views/argu.vue'),}


query

    • 可使用命名或path的路由

    • 地址栏不可见可见,请求类似 localhost:4396/user?id=3

    • 在目标页面使用this.$route.query.id来获取

例:

router.push({
  name: 'user', 
  query: { 
    id: 123  }})
或
router.push({
  path: '/user', 
  query: { 
    id: 123 
  }})


关键词:vue路由传参
上一篇 下一篇


读后有收获可以支付宝请作者喝枸杞,有疑问也可以加作者讨论:





友情链接
@寅春树 豫ICP备20020705号 Powered by Thinkcmfx