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.