keep-alive和router-view配合使用缓存整个路由页面以及路由切换

最新推荐文章于 2025-05-28 12:13:22 发布

猫猫的叮当

最新推荐文章于 2025-05-28 12:13:22 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签：缓存

本文链接：https://blog.csdn.net/qq_44741441/article/details/131682791

在这里插入图片描述

实现内容：通过vue实现，在页面有侧边栏动态来展示当前页面流程，右边进行页面的切换，左右两边都是组件，但是A/B/C组件的切换是通过keep-alive搭配router-view实现的，首先在当前文件中创建五个文件：index.vue,A/B/C.vue,router.json
在index.vue中，实现的是整个页面的布局，左边组件的引入具体样式看具体需求不再列出，右边主页面的内容实现缓存如下：

<keep-alive>
	<router-view @toggle='toggleHander' />
</keep-alive>

toggle是A/B/C组件中emit事件绑定的，用来实现左边栏动态的切换，不再具体展示，具体页面路由切换在具体的A/B/C页面中，toggleHa
在router.json中我们将主页面路由配置进去：

{
   
   
	"pages":["pageA","pageB","pageC"]
}

通过这些能实现是基于在router.js里的配置
router.js文件关于这块的处理

// 每个小文件里面的json
    const childernRouter = require(`@/${
     
     fileName}/router.json`)
    childernRouter.pages.forEach((childFileName)=>{
   
   
        const childComponentConfig=(resolve)=>require([`@/${
     
     fileName}/${
     
     childFileName}`],resolve)