背景:点击nav标签切换的时候页面的搜索条件还要存在
实现:通过KeepAlive缓存实现
代码如下:
路由配置
{
path: 'deliveryList',
name: 'deliveryList',
component: () => import('@/views/orderManage/overseasOrder/delivery/index.vue'),
meta: {
locale: 'menu.orderManage.overseasOrder.deliveryListOrder',
requiresAuth: true,
role: ['*'],
isShow: false,
code: 'OMS:I:overseasOrder:deliveryList',
keepAlive: true
}
},
// 订单详情页
{
path: 'OverseasOrderItemPage',
name: 'OverseasOrderItemPage',
component: () => import('@/views/orderManage/overseasOrder/orderList/components/orderItemPage.vue'),
meta: {
locale: 'menu.orderManage.overseasOrder.unpackingOrder',
requiresAuth: true,
role: ['*'],
isShow: false,
code: 'OMS:I:overseasOrder:OverseasOrderItemPage',
keepAlive: false
},
}
1.所有组件都缓存
<template>
<router-view v-slot="{ Component, route }">
<keep-alive >
<component :is="Component" :key="route.path"></component>
</keep-alive>
</router-view>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue'
import { useRouter } from 'vue-router';
export default defineComponent({
name: 'OversearOrderManage',
})
</script>
2. 包含组件或排除组件缓存(----它会根据组件的 name 选项进行匹配,所以组件如果想要条件性地被 KeepAlive 缓存,就必须显式声明一个 name 选项---)
<template>
<router-view v-slot="{ Component, route }">
<!-- 包含需要缓存的数组 -->
<!-- <keep-alive :include="includeList"> -->
<!-- 排除不需要缓存的数组 -->
<keep-alive :exclude="includeList">
<component :is="Component" :key="route.path"></component>
</keep-alive>
</router-view>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue'
import { useRouter } from 'vue-router';
export default defineComponent({
name: 'OversearOrderManage',
setup(){
const state = reactive<any>({
includeList: []
})
const route = useRouter()
watch(() => route,(newVal:any,oldVal)=>{
//包含需要缓存数组的判断
// if(newVal.currentRoute.value.meta.keepAlive && !state.includeList.includes(newVal.currentRoute.value.name)){
// 排除需要缓存数组的判断
if(!newVal.currentRoute.value.meta.keepAlive && !state.includeList.includes(newVal.currentRoute.value.name)){
state.includeList.push(newVal.currentRoute.value.name);
console.log(state.includeList);
}
},{deep:true}) // 开启深度监听
return{
...toRefs(state)
}
}
})
</script>