vue keep-alive部分使用场景

一、需求：

有三个页面，列表、新增、预览，如下

preview可返回到add继续修改，需要form表单还在，所以需要对add页面做缓存，但是从list进入add的时候需要清空缓存，否则会展示上次提交信息。

二、解决方案（两种）

router.js

export default [
    {
        path: '/list',
        name: 'list',
        meta: {
            title:"列表",
            index:0
        },
        component: () => import('@/views/list.vue') 
    },{
        path: '/add',
        name: 'add',
        meta: {
            title:"新增",
            keep_alive: true,
            index:1
        },
        component: () => import('@/views/add.vue') 
    },{
        path: '/preview',
        name: 'preview',
        meta: {
            title:"信息",
            index:2
        },
        component: () => import('@/views/preview.vue') 
    },
]

1、用include

router.js——设置index表示页面层级，如上

App.vue——监听路由

<div id="app">
	<keep-alive :include="keep_alive">
		<router-view />
	</keep-alive>
</div>
data() {
  return {
    keep_alive: []
  };
},
watch: {
    $route(to, from) {
	    if (to.meta.index > from.meta.index && to.name === "add") {
	       this.keep_alive = ["add"];
	     } else if (to.meta.index < from.meta.index && to.name != "add") {
	       this.keep_alive = [];
	     }
    }
 }

2、meta里添加属性

router.js——给需要缓存的路由，在meta添加属性keep_alive=true，如上

App.vue

<keep-alive>
	<router-view v-if="$route.meta.keep_alive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keep_alive"></router-view>

list.vue

beforeRouteLeave:(to,from,next)=>{
   if(to.name=="add"){
     from.meta.keep_alive=false
   }
   next() 
 },

add.vue

//保存成功以后keep_alive被清除，所以重新设置
beforeRouteLeave:(to,from,next)=>{
  if(to.name=="preview"){
    from.meta.keep_alive=true
  }else{
    from.meta.keep_alive=false
  }
   next() 
},

preview.vue

//保存成功 跳转到list前
this.$router.options.routes[2].meta.keep_alive=false