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簡單粗暴（推薦）