Vue использует кеш поддержания активности и уничтожает состояние кеша

Vue использует кеш поддержания активности и уничтожает состояние кеша

нуждаться

Страница должна сохранять рабочее состояние и уничтожать состояние кеша при закрытии вкладки.

выполнить

  • Установите для атрибута маршрутизации keepAlive значение true, соответствующее странице, состояние которой необходимо сохранить.
  • Используйте атрибут включения или исключения в keep-alive
    Добавьте атрибут keepAlive
    Добавьте его самостоятельно в соответствии с используемым методом динамической маршрутизации и статической маршрутизации, добавьте местоположение
{
     name:'a'
     path:'/A',
     component:()=>import('@/pages/A'),
     meta:{
         title:'A页面'
     }
 },

После того, как добавление будет завершено, добавьте атрибут include в html страницы. Включение будет выборочно кэшироваться. Если его нет, оно не будет кэшировано. Исключение будет наоборот. Добавляя и удаляя значение атрибута include
, какие страницы сохраняются и уничтожаются
в сочетании с компонентом метки. Установите значение tagNames в vuex, чтобы оно стало глобальной общей переменной.
Установите tagNames в vuex, здесь используйте историю массива, отображаемую тегом, чтобы получить

state: {
	historys: [],
},
 mutations: {
	SETHISTORYS(state, historys) {
		state.historys = historys
	}
},
 actions: {
	setHistorys({ commit },historys) {
		commit("SETHISTORYS", historys)
	},
 },
 getters:{
	historys(state){
		return state.historys
	},
	/** 标签名称列表 */
	tagNames(state){
		return state.historys.map(function(tag){return tag.name})
	}
 }
<template>
  <div>
    <keep-alive :include="tagNames">
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "superAdmin",
  computed: {
    ...mapGetters("history", ["tagNames"]),
  },
};
</script>
<style lang="scss"></style>

Здесь необходимо отметить следующее: поскольку включение и исключение заставляют тег действовать на всех страницах vue, значение атрибута имени которых согласуется со значением атрибута этого тега, включают или исключают (обратите внимание, что это не означает присвоение значения имени маршрут)

Supongo que te gusta

Origin blog.csdn.net/weixin_46995731/article/details/122620986
Recomendado
Clasificación