如果有兩個頁面邏輯大都相同，咱們想到的第一個肯定是寫一個組件，然后兩個路由都指向這個組件。
那如果現(xiàn)在多添加一個需求：兩個頁面在切換路由時都需要緩存數(shù)據(jù)，并且兩個頁面的緩存數(shù)據(jù)要求獨立。
這個需求很簡單：在router-view外層包裹一個keep-alive組件，指定緩存名稱即可。
OK，有了需求，問題出現(xiàn)：
因為keep-alive是根據(jù)組件的name來指定緩存策略的，兩個路由用的同一個component，他們的name是相同的，這樣導(dǎo)致兩個頁面的數(shù)據(jù)不能獨立緩存，他們會共用緩存數(shù)據(jù)
so,咱們有了又有了新的想法：能否動態(tài)的設(shè)置component的name,引用同一個組件設(shè)置不同的name。
相信這也是大家能搜到我這篇文章的原因，嘿嘿。
答案肯定的文章來源：http://www.zghlxwxcb.cn/news/detail-620446.html
//生產(chǎn)打包，需要vite引入模塊
const viewsComponent = import.meta.glob('/src/views/**/*.vue')
//實際的組件路徑
const componentPath= '/src/views/test.vue'
//自定義組件name
const componentName = 'woshipipixia'
//構(gòu)造動態(tài)路由
const dynamicRoute = {
name: 'test',
path: 'test',
component: () => {
//根據(jù)組件路徑動態(tài)獲取組件實例
const component = viewsComponent[componentPath]
if (!component) throw new Error(`${componentPath} 組件文件不存在！`)
//重新構(gòu)造組件，調(diào)整組件name
return component().then(comp => ({
...comp.default,
name: componentName,
}))
}
}
//添加路由
router.addRoute(dynamicRoute)
這樣的組件name會被設(shè)置為woshipipixia，咱們就可以用這個name 在keep-alive緩存文章來源地址http://www.zghlxwxcb.cn/news/detail-620446.html
到了這里，關(guān)于vue3，動態(tài)引入組件，同時動態(tài)設(shè)置組件的name，用于keep-alive緩存的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
