关于Vue-$router传参出现刷新页面或者返回页面丢失数据的问题

也算是踩到坑了,但不是我踩到的,不过还是得说下这个问题,很严重,对于小白和初学者是比较有帮助的,如果使用到路由传参,请选择你想要的传参方式params或者query

 

1.query

this.$router.push({
        path: 'newApply',
        query: {
          type: item.key,
          typeDesc: item.value
        }
      })

  

2.params

this.$router.push({
        name: 'newApply',
        params: {
          type: item.key,
          typeDesc: item.value
        }
      })

  

比较用法

1.用法
query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。


2.url地址显示
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
   query

http://localhost:8080/workorder/newApply?type=BOX_DEPLOY&typeDesc=%E5%B0%8F%E7%99%BD%E7%9B%92%E9%83%A8%E7%BD%B2
params
http://localhost:8080/workorder/newApply

  

3.注意点
query刷新不会丢失query里面的数据
params刷新 会会 丢失 params里面的数据

posted @ 2019-10-30 18:25  疯狂的严先生  阅读(...)  评论(...编辑  收藏