vue3.0后退不刷新，前进刷新解决方案

问题

从组织架构-》文章列表-》详情，想要组织架构的展开后，点击文章列表，回退后还想保持组织架构的原有点击展开效果，或者从搜索列表进入文章列表，文章列表后退后，还想保持上次搜索的历史记录。

原因

由于是用vue单页面写的，导致后退时候，会重新渲染调用方法，导致每次回退，都是重新请求接口。

思路

首先进行路由更改，增加keep-alive属性，然后在app.vue的keep-alive中定义include设置缓存的路由名字，当需要缓存时候，在vuex中存储，不需要的话，在vuex删除,但是仍然存在问题：多界面时候代码量太大 目前没有好的解决方案，暂时先按照此种方式，可达到想要结果

1、路由

const routers = [{
        path: '/',
        name: 'index1',
        component: () =>
            import ( /* webpackChunkName: 'index1' */ '../views/Index.vue'),
        meta: {
            keepAlive: true
        }
    },
    {
        path: '/index',
        name: 'index',
        component: () =>
            import ( /* webpackChunkName: 'index' */ '../views/Index.vue'),
        meta: {
            keepAlive: true
        }
    },
    {
        path: '/documents-list/:id/:title',
        name: 'DocumentsList',
        component: () =>
            import ( /* webpackChunkName: 'List' */ '../views/documents/List.vue'),
        meta: {
            keepAlive: false
        }
    },
    {
        path: '/documents-details/:id',
        name: 'DocumentsDetails',
        component: () =>
            import ( /* webpackChunkName: 'Details' */ '../views/documents/Details.vue'),
        meta: {
            keepAlive: false
        }
    },
    {
        path: '/documents-search/:id?',
        name: 'DocumentsSearch',
        component: () =>
            import ( /* webpackChunkName: 'Search' */ '../views/documents/Search.vue'),
        meta: {
            keepAlive: false
        }
    },
]
export default routers

2、pinia(vue2.0的vuex)

import { defineStore } from "pinia";


export const mainStore = defineStore('main', {
    state: () => {
        return {
            keepAlive: []
        }
    },
    getters: {},
    actions: {
        init(data) {
            this.keepAlive = data
        },
        delete(pathName) {
            this.keepAlive.indexOf(pathName) > -1 && this.keepAlive.splice(this.keepAlive.indexOf(pathName), 1)
        },
        add(pathName) {
            this.keepAlive.indexOf(pathName) == -1 && this.keepAlive.push(pathName)
        }
    }
})

3、APP.vue

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="store.keepAlive">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { mainStore } from './store'
import { useRoute, useRouter } from 'vue-router'

let includeList = ref([])
let router = useRouter()
let route = useRoute()
//第一种引用方式
const store = mainStore()

onMounted(() => {
  router.options.routes.forEach((item) => {
    return item.meta.keepAlive && includeList.value.push(item.name)
  })

  store.init(includeList.value)
})

watch(
  () => route.name,
  (newValue, oldValue) => {
    //从组织架构进入文章列表，默认文章列表是缓存的
    if (newValue === 'DocumentsList' && (oldValue === 'index' || oldValue === 'index1')) {
      store.add('DocumentsList')
    }

    //当回到组织架构界面时候，删除文章列表的缓存
    if ((newValue === 'index' || newValue === 'index1') && oldValue === 'DocumentsList') {
      store.delete('DocumentsList')
    }

    //从组织架构进入搜索，默认搜索是缓存的
    if (newValue === 'DocumentsSearch' && (oldValue === 'index' || oldValue === 'index1')) {
      store.add('DocumentsSearch')
    }

    //当回到组织架构界面时候，删除搜索的缓存
    if ((newValue === 'index' || newValue === 'index1') && oldValue === 'DocumentsSearch') {
      store.delete('DocumentsSearch')
    }

    //从列表进入搜索，默认搜索缓存
    if (newValue === 'DocumentsSearch' && oldValue === 'DocumentsList') {
      store.add('DocumentsSearch')
    }

    //从搜索回到列表，删除缓存
    if (newValue === 'DocumentsList' && oldValue === 'DocumentsSearch') {
      store.delete('DocumentsSearch')
    }
  }
)
</script>
<style lang="less">
@import './assets/css/common.less';
</style>

blog.csdn.net/versionli/a…