vue router 路由跳转获取不到参数

问题:
路由传参一直不能获取到参数, 未出现报错

原因:
混淆 query 和 params 的使用方法, 在使用 params 传参时错误的使用了 path

代码:
正确写法1:

使用path要对应query

    ...
    this.$router.push({
      path: '/Health',
      query: {
        title: item['name'],
        list: item['list']
      }
    })

获取方式
    const { title, actionList } = this.$route.query


正确写法2:

使用name要对应params

    ...
    this.$router.push({
      name: 'Health',
      params: {
        title: item['name'],
        list: item['list']
      }
    })

获取方式
    const { title, list } = this.$route.params


总结:
query 传参是使用 path 来引入,会将传递的参数显示在 url 后,像是带参的 get 请求
params 传参使用 name 引入,会隐藏参数,像是 post
使用 query 页面刷新时不会清空传入的数据, params 则会清空

猜你喜欢

转载自blog.csdn.net/qq_45991812/article/details/132600994