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

这篇具有很好参考价值的文章主要介绍了keep-alive和router-view配合使用缓存整个路由页面以及路由切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

实现内容：通过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)
        const childComponentName=upperFirst(
            camelCase(
                //	 剥去文件名开头的`'./`和结尾的扩展名
                childComponentName.replace(/^\.\/(.*)\.w+$/,'$1')
            )
        )
        const child ={
            path:childFileName,
            name:fileName+'./'+childComponentName,
            component:childComponentConfig.default || childComponentConfig
        }
        singlePage.children.push(child)
    })
    singlePage.redirect = singlePage.path+'/'+singlePage.children.path // 根据配置的顺序展示第一个
    // 构造路由
    pageArr.push(singlePage)

router.js整个文件具体实现文章来源地址https://www.toymoban.com/news/detail-573223.html

let pageArr=[]
// 整个项目的json 
let requireComponent=require('@/app.json')
requireComponent.pages.forEach((trade)=>{
    const fileName=trade.path
    // 获取路由，路由懒加载
    const componentConfig=(resolve)=>require([`@/${fileName}`,resolve])
    const componentName=upperFirst(
        camelCase(
            //	 剥去文件名开头的`'./`和结尾的扩展名
            fileName.replace(/^\.\/(.*)\.w+$/,'$1')
        )
    )
    let singlePage={
        path:'/'+fileName,
        name:String(String(componentName)),
        component:componentConfig.default || componentConfig,
        children:[],
        props:(route)=>({query:{transType:route.query.transType,oldTask:route.query.taskId}})
    }
    // 每个小文件里面的json
    const childernRouter = require(`@/${fileName}/router.json`)
    childernRouter.pages.forEach((childFileName)=>{
        const childComponentConfig=(resolve)=>require([`@/${fileName}/${childFileName}`],resolve)
        const childComponentName=upperFirst(
            camelCase(
                //	 剥去文件名开头的`'./`和结尾的扩展名
                childComponentName.replace(/^\.\/(.*)\.w+$/,'$1')
            )
        )
        const child ={
            path:childFileName,
            name:fileName+'./'+childComponentName,
            component:childComponentConfig.default || childComponentConfig
        }
        singlePage.children.push(child)
    })
    singlePage.redirect = singlePage.path+'/'+singlePage.children.path // 根据配置的顺序展示第一个
    // 构造路由
    pageArr.push(singlePage)
})
// 如果路由默认找不到匹配首页
pageArr.push(
    {
        path:'*',
        redirect:pageArr[0].path, // 默认跳转到首页
        component:pageArr[0].component 
    }
)
export const constantRouterMap= pageArr
export default new Router({
    mode:'hash',
    scrollBehavior:()=>({
        y:0
    }),
    routes:constantRouterMap,
    base:ProcessingInstruction.env.BASE_URL
})