前言：儲存路由跳轉前的狀態這種應用場景還是很常遇到的，比如進行商品篩選，篩選出一些後，點選路由跳轉到某個商品的詳情頁，然後返回頁面時，我想讓之前的頁面能展示之前篩選出來的商品。

一、程式碼實現

<!-- App.vue根元件程式碼 -->
<template>
  <div class="app">
      <div class="slide">
          <ul>
              <li><router-link to="/page1" >page1</router-link></li>	
              <li><router-link to="/page2" >page2</router-link></li>	
          </ul>	
      </div>
      <div class="content">
      	   <keep-alive>
      	       <router-view></router-view>
      	   </keep-alive>
      </div>
  </div>
</template>
 

//路由配置頁面程式碼
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/page/Page1'
import Page2 from '@/page/Page2'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/page1', component: Page1 },
    {path: '/page2', component: Page2 },
  ],
  mode:'history'
})

<!-- Page1程式碼 -->
<template>
	<div class="page-1">
		<h3>page1</h3>
		路由前的輸入狀態:<input type="text" v-model="value">
		<router-link to="page2">跳轉到page2</router-link>
	</div>
</template>
<script type="text/javascript">
	export default {
		name:'page1',
		data(){
			return {
				value:''
			}
		}
	}
</script>
 

<!-- page2程式碼 -->
<template>
	<div class="page-2">
		<h3>page2</h3>
		<router-link to="/page1">返回到page1</router-link>
	</div>
</template>

這樣就可以儲存到路由跳轉前的狀態了。但是這樣有個問題是，如果頁面很多的話，並且並不是所有頁面都需要儲存路由前的狀態。

二、程式碼優化

<!-- App.vue根元件程式碼 -->
<template>
  <div class="app">
      <div class="slide">
          <ul>
              <li><router-link to="/page1" >page1</router-link></li>	
              <li><router-link to="/page2" >page2</router-link></li>	
          </ul>	
      </div>
      <div class="content">
      	   <keep-alive>
      	       <router-view v-if="$route.meta.keepAlive"></router-view>
      	   </keep-alive>
      	   <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
  </div>
</template>
 

//路由配置頁面
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/page/Page1'
import Page2 from '@/page/Page2'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/page1', component: Page1, meta:{ keepAlive:true } },
    {path: '/page2', component: Page2 },
  ],
  mode:'history'
})

這樣，我們可以自由控制需要快取的路由頁面了。

三、keep-alive使用陷阱

<!-- App.vue根元件程式碼 -->
<template>
  <div class="app">
      <div class="slide">
          <ul>
              <li><router-link to="/page1" >page1</router-link></li>	
              <li><router-link to="/page2" >page2</router-link></li>	
          </ul>	
      </div>
      <keep-alive>
          <div class="content">
              <router-view></router-view>
          </div>  
      </keep-alive>
  </div>
</template>

keep-alive裡面必須包裹元件，而不能出現其他標籤。不然會導致無法快取頁面。