前言

关于 vue-router的数据丢失问题,很多博主进行了解答。

vue-router的跳转传参方式分为 query 和 params俩种。

  1. query传参数,相当于拼接在url后面,这种方式不会丢失参数,但是数据量大的话(比如传递对象),url就会变得太长而且不隐密。
  2. params传参数,不在url中显示,但是刷新页面的时候无法避免丢失。

解决方案:

1.下图为该文章(其中对该现象有详细描述)的四种解决思路:

在这里插入图片描述
2. 我这边想到了一个省代码,并且不会让数据显示到url中的方式:
在页面跳转的时候讲数据保存:

router.beforeEach((to, from, next) => {
    //通过该方式可以保存 VueRouter 的数据不被刷新
     localStorage.setItem('routerParams', JSON.stringify(to.params));
     next()
});

工具类获取保存起来的数据(之所以用工具类是因为可以对数据进行统一加密处理):
工具类
然后取数据就通过工具类的方法取就好了:
如图所示

OK.

Logo

前往低代码交流专区

更多推荐