實(shí)現(xiàn)內(nèi)容：通過vue實(shí)現(xiàn)，在頁面有側(cè)邊欄動(dòng)態(tài)來展示當(dāng)前頁面流程，右邊進(jìn)行頁面的切換，左右兩邊都是組件，但是A/B/C組件的切換是通過keep-alive搭配router-view實(shí)現(xiàn)的，首先在當(dāng)前文件中創(chuàng)建五個(gè)文件：index.vue,A/B/C.vue,router.json
在index.vue中，實(shí)現(xiàn)的是整個(gè)頁面的布局，左邊組件的引入具體樣式看具體需求不再列出，右邊主頁面的內(nèi)容實(shí)現(xiàn)緩存如下：

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

toggle是A/B/C組件中emit事件綁定的，用來實(shí)現(xiàn)左邊欄動(dòng)態(tài)的切換，不再具體展示，具體頁面路由切換在具體的A/B/C頁面中，toggleHa
在router.json中我們將主頁面路由配置進(jìn)去：

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

通過這些能實(shí)現(xiàn)是基于在router.js里的配置
router.js文件關(guān)于這塊的處理

// 每個(gè)小文件里面的json
    const childernRouter = require(`@/${fileName}/router.json`)
    childernRouter.pages.forEach((childFileName)=>{
        const childComponentConfig=(resolve)=>require([`@/${fileName}/${childFileName}`],resolve)
        const childComponentName=upperFirst(
            camelCase(
                //	 剝?nèi)ノ募_頭的`'./`和結(jié)尾的擴(kuò)展名
                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 // 根據(jù)配置的順序展示第一個(gè)
    // 構(gòu)造路由
    pageArr.push(singlePage)

router.js整個(gè)文件具體實(shí)現(xiàn)文章來源地址http://www.zghlxwxcb.cn/news/detail-573223.html

let pageArr=[]
// 整個(gè)項(xiàng)目的json 
let requireComponent=require('@/app.json')
requireComponent.pages.forEach((trade)=>{
    const fileName=trade.path
    // 獲取路由，路由懶加載
    const componentConfig=(resolve)=>require([`@/${fileName}`,resolve])
    const componentName=upperFirst(
        camelCase(
            //	 剝?nèi)ノ募_頭的`'./`和結(jié)尾的擴(kuò)展名
            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}})
    }
    // 每個(gè)小文件里面的json
    const childernRouter = require(`@/${fileName}/router.json`)
    childernRouter.pages.forEach((childFileName)=>{
        const childComponentConfig=(resolve)=>require([`@/${fileName}/${childFileName}`],resolve)
        const childComponentName=upperFirst(
            camelCase(
                //	 剝?nèi)ノ募_頭的`'./`和結(jié)尾的擴(kuò)展名
                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 // 根據(jù)配置的順序展示第一個(gè)
    // 構(gòu)造路由
    pageArr.push(singlePage)
})
// 如果路由默認(rèn)找不到匹配首頁
pageArr.push(
    {
        path:'*',
        redirect:pageArr[0].path, // 默認(rèn)跳轉(zhuǎn)到首頁
        component:pageArr[0].component 
    }
)
export const constantRouterMap= pageArr
export default new Router({
    mode:'hash',
    scrollBehavior:()=>({
        y:0
    }),
    routes:constantRouterMap,
    base:ProcessingInstruction.env.BASE_URL
})

到了這里，關(guān)于keep-alive和router-view配合使用緩存整個(gè)路由頁面以及路由切換的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！