vue.js页面刷新及后退参数丢失的解决方案

在使用vue开发的单页面项目中，会经常遇到点击列表传入参数进入详情页，当要打开某一项的详情页或者暂时离开列表页，再返回（后退时），详情页获取的参数会全部丢失，页面同时也会报错，用户体验极度不友好。

解决办法有三种：

第一种方法：用vue 的<keep-alive>，即在<router-view>外套一层<keep-alive>。

虽然可以达到一定效果，但是控制起来比较麻烦，因为项目中并不是所有的页面都需要缓存，这时候我们就可以通过路由的meta
参数进行控制，将容器修改为两个，通过keepAlive进行控制，当keepAlive为true时页面则进行缓存，false时不进行缓存。

<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件！ -->
  </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件！ -->
</router-view>

{
    path:'/index',
    name:'index',
    component:index,
    meta: {
        keepAlive: true // 需要被缓存
    }
},
{
    path:'/history',
    name:'history',
    component:history,
    meta: {
        keepAlive: false // 需要被缓存
    }
},

meta：

1、到此路由所需要的 权限 角色
2、对此路由是否采用 缓存

3、此路由进入页面的标题等信息

第二种方法：就是通过配置路由的URL进行参数传递，因为页面的刷新以及后退他的URL路径都是不会改变的

1.通过配置路由的query进行传递，他会将你穿的参数自动配置到URL上。

this.$router.push({name: 'addGoodsList', query: {title: '添加商品'}})==》

http://xxx.xxx.xxx/articleDetail?title=添加商品，

2.手动的自己在路由的path上添加参数

routes: [{path: '/articleDetail/:articleId',name: 'articleDetail'}]

第三种方法：直接用localStorage，或者sessionStorage简单粗暴（推荐）