vue.js页面刷新及后退参数丢失

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

解决办法有三种：

第一种方法：

用vue 的，即在外套一层。

虽然可以达到一定效果，但是控制起来比较麻烦，因为项目中并不是所有的页面都需要缓存，这时候我们就可以通过路由的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路径都是不会改变的

通过配置路由的query进行传递，他会将你穿的参数自动配置到URL上。
this.$router.push({name: ‘addGoodsList’, query: {title: ‘添加商品’}})
http://xxx.xxx.xxx/articleDetail?title=添加商品

手动的自己在路由的path上添加参数
routes: [{path: ‘/articleDetail/:articleId’,name: ‘articleDetail’}]

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