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

项目地址

导航标签栏的实现思路

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

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

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

watch(
    () => route.path,
    () => {
      addTags()//增加导航标签栏
    }
)

3.代码TagsView/index.vue

const addTags = () => {
  const { name } = route
  if (name && name!='Dashboard') {
    tagsViewStore.addView(route)
  }
  return false
}

4.代码store/tagsView.ts

addVisitedView(view) {
    if (this.visitedViews.some((v) => v.path === view.path)) return
    this.visitedViews.push(
        Object.assign({}, view, {
            title: view.meta.title || 'no-name'
        })
    )
},
addCachedView(view) {
    if (this.cachedViews.includes(view.name)) return
    this.cachedViews.push(view.name)
},

vue3使用keep-alive注意的地方

1.我们缓存的是页面的main部分 header和侧边栏是不缓存的，vue2 的写法

<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>

我们发现这样没有效果还会有一个警告

上面的写法在 vue2 中是可以的,但是在 vue3 中需要将 keep-alive 写在 router-view 中才行,我们修改一下写法

 <router-view v-slot="{ Component }">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedViews">
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>

这种写法其实就是 router-view 组件的插槽传递了一个带有当前组件的组件名 Component 的对象,然后用 keep-alive 包裹一个动态组件(回归原始写法)。

2.使用 inclue 控制页面缓存，keep-alive 默认会缓存内部的所有组件实例，但我们可以通过 include 来定制该行为。它的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是一个数组。这里我们使用一个数组来维护需要缓存的组件页面,注意这个数组中是组件的名字而不是路由的 name,而是组件的name，vue3我们用setup 语法的时候没有export default 那我们的name定义在什么地方呢这里我们需要一个插件

npm i vite-plugin-vue-setup-extend -D

然后在vite.config.ts中引入这个插件就可以使用了

name的写法

这样inclue 我们获取的cachedViews 路由的name和组件name一样的话页面就会被缓存如下图，切换页面的时候输入框的值并没有改变

53bdbd97-e096-4de7-9175-64321755e0d3

水平有限有问题欢迎在评论区指出,一起讨论探索，如果喜欢，请喜欢和收藏哦感谢！！！