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