【Vue】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>
      <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里面必须包裹组件，而不能出现其他标签。不然会导致无法缓存页面。