Vue-Router 跳转刷新页面 Params参数丢失问题！

前言

关于 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.