vue动态添加路由，刷新页面路由失效

Question

我的需求是点击某个按钮会跳转到“详情页面”，他们共用一个vue组件，但是需要path路径不能一样，实现下面多开标签页的功能，也就是每点击一个按钮就会打开一个单独的详情页面，不能覆盖之前的。

下面是我的代码：
这部分代码是，每点击一个“查看详情”按钮就会往vuex commit一个对象，下面这个routerInfo对象是我需要动态添加的路由。

下面要添加的路由也已经被添加进去了，打印的是router中的全部路由。

---

路由这边直接使用的是vuex routes里面的数据

下面是我“刷新页面之后”，刚添加进去的路由不存在了。打印的也是vuex state中routes的数据。

此时页面也是空白的：

以下代码刷新页面保存vuex的数据。尽管使用以下代码，我动态添加的路由在state中，刷新页面还是消失了。

为什么会刷新之后路由消失了，我路由中使用的是vuex中的数据

Answer 1

放咋vuex中刷新肯定没了，在vuex中引入localstorage，存在这里面