vue路由传参页面刷新参数丢失问题解决方案

方法二：路由属性配置传参：

this.$router.push({

name:“/admin/${item.id}”,

})

//这个组件对应的路由配置

{

//组件路径

path: ‘/admin:id’,

//组件别名

name: ‘admin’,

//组件名

component: Admin,

}

通过路由属性配置传参我们可以用this.$route.params.id来获取到id的值，注意this.$router.push方法里面路径带的是值，路由配置项那里带的是变量名(属性名)来实现的对应；

以上两种传参方式基本上可以理解为ajax中的post请求方式，参数都是不可见的，但是上面两种方法都有一个弊端，就是当页面刷新了是获取不到参数值的，那么有没有一种方法是页面刷新之后参数依然存在呢？

方法三：query传参

this.$router.push({

name:“/admin”,

query:{id：item.id}

})

//这个组件对应的路由配置

{

//组件路径

path: ‘/admin’,

//组件别名

name: ‘admin’,

//组件名

component: Admin,

}

第三种方式是用query来传参，这种方式是可以解决页面刷新参数消失问题的，这种方式可以理解为是ajax中的get方法，参数是直接在url后面添加的，参数是可见的，所以解决页面刷新参数消失问题建议使用方法三来解决；

其实解决页面刷新参数丢失问题的方案还有很多，比如把参数存在sessionStorange或者localStorange中都是可行的，不过我们既然用vue框架，就要用vue的方式来解决问题。这里只是想告诉大家，问题的解决方案可以多种多样，要学会用多种方式或者说多种方案来解决一个问题，不要有太多的局限性！

此内容来自[https://cloud.tencent.com/developer/article/1601372](htt 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ps://cloud.tencent.com/developer/article/1601372)，侵权立删，仅用于学习记录