麟の随笔

  • 游戏
  • 影视
  • Tech
  1. 首页
  2. 科技
  3. 前端
  4. 正文

Vue3 使用多级组件 Keepalive 相同路由的配置

2023年3月12日 34点热度 0人点赞 0条评论

本文适用于Vue3下的keepalive缓存路由,已通过Ant-Design Vue 的Tabs组件测试

一、路由结构

项目的路由结构为固定+后台生成

{
    path: '/',
    name: '首页',
    component: TabsView,
    redirect: '/login',
    children: []
}

若项目有多级路由,即有多个地方有<router-view/>,则需要在会切换的地方修改即可,其他地方可保持不变,这里的结构为

App.vue -> TabsView.vue -> PageView.vue

所以App.vue保持<router-view/>其他参考下面的文章

二、文件配置

VueX

采用VueX来缓存include数据

state: () => ({
    keepAliveList: ['']
})
mutations: {
    closeTab(state, values) {
        state.keepAliveList = state.keepAliveList.filter(item=>!values.includes(item))
    },
    updateKeepList(state, val) {
        let index = state.keepAliveList.findIndex(
            (item) => item === val
        );
        if (index === -1) {
            state.keepAliveList.push(val);
        }
    }
}

TabsView.vue

因为存在同一组件,被不同路由的情况,所以添加以下方法,转自Vue3 多路由指向同一组件 实现keep-alive缓存页面的解决方案

Template 部分

<router-view v-if="!refreshing" ref="tabContent" v-slot="{ Component }">
    <keep-alive :include="store.state.setting.keepAliveList">
        <component :is="wrap(route.name, Component)" :key="route.fullPath"/>
    </keep-alive>
</router-view>

Script 部分

const wrapperMap = new Map()
const wrap = (name, component) => {
    let wrapper
    const wrapperName = name
    if (wrapperMap.has(wrapperName)) {
        wrapper = wrapperMap.get(wrapperName)
    } else {
    wrapper = {
        name: wrapperName,
        render() {
            return component
        },
    }
    wrapperMap.set(wrapperName, wrapper)
    }
    return h(wrapper)
}

//刷新方法

//关闭本页面方法
const remove = (key) =>{
    const clearCaches = [key]
    store.commit("closeTab", clearCaches )
}

//关闭其他页面方法,参考上面的方法,将要关闭的组件名称添加到数组提交到closeTab
const closeRight ...
const closeLeft ...
const closeOthers ...

这里的refreshing为刷新时使用,当标签页刷新时,切换状态

PageView

Template 部分

<router-view v-slot="{ Component }">
    <keep-alive>
        <component :is="Component"/>
    </keep-alive>
</router-view>
标签: 暂无
最后更新:2023年3月12日

Kylin

必须有人浴血奋战,世上才有自由可言!

点赞
< 上一篇

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

文章目录
  • 一、路由结构
  • 二、文件配置
    • VueX
    • TabsView.vue
    • PageView

COPYRIGHT © 2023 kirinz.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

闽ICP备19013981号