vue路由传参刷新页面数据丢失问题

最新推荐文章于 2024-05-15 03:16:32 发布

原创最新推荐文章于 2024-05-15 03:16:32 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #vue

vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

javascript

21 篇文章

订阅专栏

本文探讨了在Vue中使用params和query进行路由传参的问题。当使用params传参并刷新页面时，参数会丢失。为了解决这个问题，提出了三种解决方案：1) 使用query传参，因query在URL中可见，刷新页面后参数依然存在；2) 存储于Vuex状态管理中，适用于不需要跨多页面的情况；3) 利用sessionStorage或localStorage，但不推荐，尤其对于大量数据。同时，介绍了vue-router的params、query和路由配置等传参方式。

问题:

在写项目的时候，使用params路由传参，刷新页面，结果参数报错消失。

原因：

使用params传参的时候，当你跳转到子页面，如果你刷新页面，代表就不是从父级页面跳转过来的，参数当然会消失。

问题解决：

1、使用query传参数，因为query是在链接之中携带的参数，相当于get请求，你即便刷新，链接也依旧携带了参数。
2、存储于vuex之中，不过一般数据量不是太大，或者不是垮多个页面，亦或者其他方面的特殊需求，不建议使用。
3、使用sessionStorage、localStorage,不建议使用，原因同上。

关于vue路由传参的三种方式：

1、路由配置改动,

//路由配置
routes: [
    {
      path: '/list/:id',
      name: 'list'
    }
]
this.$router.push({name:'list', params:{id: id}});

参数路由链接不可见，刷新页面数据消失
2、params
参数路由链接不可见，刷新页面数据消失
3、query
路由参数可见，刷新页面数据不会消失