vue3中keep-alive路由缓存

在vue3中我是用keep-alive的include属性不生效，然后我就在component组件下使用v-if了，配合vuex的store，将需要缓存的路由名字放在数组中如下：

<template><router-view v-slot="{ Component, route }"><keep-alive><component v-if="store.state.routeList.includes(route.name)" :is="Component" /></keep-alive><component v-if="!store.state.routeList.includes(route.name)" :is="Component" /></router-view>
</template><script setup lang="ts">
import { useStore } from 'vuex';const store = useStore();
</script><style scoped>
</style>

能看懂吗兄弟们，我觉得应该可以了吧，下面是需要缓存的路由组件逻辑：

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';const store = useStore()
const route = useRoute();//获取该路由的name
onMounted(()=>{//将该路由放在缓存中，也可以将该逻辑具体的点击事件中、store.commit('addRoute',route.name)
})
</script>

好像没什么文字叙述的，代码也挺简单的，这里是store文件下的缓存路由的方法。

import { createStore } from 'vuex'export default createStore({state: {routeList:['']  //需要缓存的路由列表},mutations: {addRoute(state,value){if(!state.routeList.includes(value)){//不存在该路由名字时进行添加state.routeList.push(value);}}},actions: {},modules: {}
})

如果看不懂的话建议先看看vue3,emm,我之后有时间的话会写一点关于vue3博客,害，我一个后端的刚干前端不到一个月，有错误的地方还望指出来，我虚心求教。。。。。。

vue3中keep-alive路由缓存相关推荐

vue3.0+ts+element-plus多页签应用模板：多级路由缓存
目录系列文章一.先说点啥 1. 为啥需要路由缓存? 2. 怎么实现路由缓存? 二.路由扁平化三.定义tag模块处理路由缓存四.切换路由时加入缓存五.使用keep-alive 系列文章 vue ...
tcp/ip 协议栈Linux内核源码分析六路由子系统分析一路由缓存
内核版本:3.4.39 收到报文或者发送报文的时候都需要查找路由表,频繁的路由表查找操作时需要耗费一部分CPU的,Linux提供了路由缓存来减少路由表的查询,路由缓存由hash表组织而成,路由缓存的初 ...
Vue Router：vue中实现前端路由
Vue Router 官方文档文章目录一.路由简介路由分类路由安装二.路由基本使用安装路由器并设置路由规则实现路由切换指定组件的呈现位置 this中的 $router 和 $route ...
一文看懂Vue2和Vue3中设置404界面
vue页面中,如果跳转了不存在的路由那么,那么页面就会出现白屏状态,为了解决这个问题,我们可以自己写一个404界面,让其跳转过去. 一.vue2 1.index.js 在此文件中,一般存放的都是我们的 ...
lwip路由实现_基于LWIP协议栈对路由缓存数据结构实现改进设计
LWIP(Light Weight Internet Protoco1)是瑞士计算机科学院(Swedish Institute of C++omputer Science)AdamDunkels等人开 ...
vue中使用keepAlive组件缓存遇到的坑
项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...
dubbo-go 中如何实现路由策略功能
可在控制面对服务的路由进行精细控制,是一个成熟 RPC 系统必备的能力之一.作为一个逐步走向成熟的 RPC 系统,Apache/dubbo-go(以下简称 dubbo-go )的最新版本 v1.4 中 ...
linux netfilter路由表,Linux netfilter 学习笔记之十四 netfilter模块会修改数据包关联的路由缓存吗...
起因: 最近在完成网关的一个相关功能时,对于网关本身通过socket发送的数据包,没有从正确的wan接口发送出去,但是在udp_sendmsg 函数里打印出来的信息显示路由查找是正确的,但是当数据包 ...
linux路由内核实现分析(四)---路由缓存机制(4)
ip_route_input函数 int ip_route_input(struct sk_buff *skb, __be32 daddr, __be32 saddr, u8 tos, struc ...

vue3中keep-alive路由缓存

vue3中keep-alive路由缓存相关推荐

最新文章

热门文章