从零开始vue3+vite+ts+pinia+router4后台管理(4)-导航标签栏和keep-alive缓存

从零开始vue3+vite+ts+pinia+router4后台管理(4)-导航标签栏和keep-alive缓存

项目地址

项目git地址

导航标签栏的实现思路

1.创建pinia实例在state存储两个数组,visitedViews是访问过的路由 cachedViews是你想要缓存的路由，actions里面执行刷新 删除 关闭的操作

 state: () => {
   
   
     return {
   
   
         visitedViews: [],//访问的路由
         cachedViews: []//缓存的路由
     }
 },
 actions: {
   
   
     //刷新 删除 关闭
 }

2.去监听路由变化 然后增加标签导航栏

watch(
    () => route.path,
    () => {
   
   
      addTags()