предисловие
В процессе разработки многих систем управления часто встречается это требование: необходимо кэшировать открытую страницу маршрутизации, а затем предоставлять удобные вкладки в заголовке системы для переключения, а также выполнять операции обновления и очистки данных на кэшированные страницы. Конкретная демонстрация показана на следующем рисунке:
В приведенной выше демонстрации реализовано что-то вродеwindow tabЭффект вкладки кэширует текущие данные. Реализация кэширования страниц маршрутизации в браузере может уменьшить запросы к интерфейсу, а также пользователям удобно переключаться между списками данных, которые они хотят найти.
принцип
Vueкоторый предоставилkeep-aliveAPI реализует кэширование компонентов маршрутизации.includeАтрибуты могут быть привязаны к массиву, для которого нужны компоненты маршрутизации.nameзначение, компонент маршрутизации можно кэшировать. Если маршрутизацию не нужно кэшировать, просто удалите этот элемент напрямую.
Организация и дизайн кода
Для достижения вышеуказанной функции используйтеvuexВыполните глобальное сохранение данных кеша, определенное какcacheView;Используется уже открытая страница маршрутизацииtoolBarDataсохранить. Следующая картинка кода является общей картиной дизайна кода:
Нужно добавить страницу маршрута вcacheView,должен иметьactions setCacheViewПриходитьcommitОдинchange Eventправильноstateданные изменяются, а затем измененные данные автоматически отправляются вApp.vueгде эти данные используются вkeep-aliveместо). Добавление вкладок — аналогичный процесс, который не будет описываться повторно. Что касается того, почему вкладка и страница кэша маршрутов должны быть разделены на два массива, есть два основных соображения:
- Некоторые перенаправленные страницы необходимо кэшировать, а некоторые перенаправляемые страницы кэшировать не нужно. Но страницу маршрутизации необходимо добавить в массив вкладок.
- Массив страниц вкладок должен содержать больше параметров, просто сохраните страницу маршрутизации.
nameЗначение не соответствует требованию.
реализация кода магазина
storeРеализация кода выглядит следующим образом, главное, что нужно пояснить подробнее, этоclearToolItem, Эта функция предназначена для очистки вкладки. Здесь задействовано два правила:
- Если закрытие является текущей активной вкладкой, после закрытия. Активная вкладка по умолчанию является последней открытой вкладкой.
- Если текущая вкладка является последней (в активном состоянии), она автоматически по умолчанию переходит на предыдущую активную вкладку после закрытия.
import router from '../router'
export default {
state: {
toolBarData:[],// 保存标签button的数组
cacheView:[] // 保存需要缓存的数组
},
getters: {
getToolData(state){
return state.toolBarData;
},
getCacheView(state){
return state.cacheView;
}
},
mutations: {
setToolData(state, data) { // 添加标签按钮，如果当前路由已经打开，则不再重复添加
const inToolbar = state.toolBarData.find(item => item.detail === data.detail)
!inToolbar && state.toolBarData.push({
...data
});
},
setCacheView(state,data){ // 与setToolData类似
if(state.cacheView.includes(data.componentName))
return;
state.cacheView.push(data.componentName);
},
clearToolItem(state,detail){
const index = state.toolBarData.findIndex(item => item.detail === detail);
const isActive = router.app.$route.path == state.toolBarData[index]["detail"];
const len = state.toolBarData.length - 1;
state.toolBarData.splice(index,1);
(index == len || isActive) && router.push({path:state.toolBarData[state.toolBarData.length - 1]["detail"]});
},
clearCacheView(state,viewName){
const index = state.cacheView.findIndex(item => item == viewName);
state.cacheView.splice(index,1);
}
},
actions: {
commitToolBar({commit},data) {
commit("setToolData",data);
commit("setCacheView",data);
},
clearToolBar({commit},data){
commit("clearToolItem",data.detail);
},
clearCache({commit},data){
commit("clearCacheView",data);
}
}
}
Путь к кэшу входных файлов
существуетApp.vueвходной файл, используйтеkeep-aliveКэшируйте соответствующие компоненты маршрутизации, отслеживайте текущие изменения маршрутизации и добавляйте кэшированные маршруты и метки.
<template>
<el-main style="position:relative;margin-top:45px;">
<!--渲染标签的地方-->
<ToolBar></ToolBar>
<div class="routeWrap">
<transition name="fade-transform">
<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>
</transition>
</div>
</el-main>
</template>
Код панели инструментов
используется здесьelementuiизel-tagЭтикетка,el-tagМетка имеет такие атрибуты, как анимация, кнопка закрытия, цвет темы и т. д.closeФункция заключается в удалении метки маршрутизации и очистке кеша (уже посещенного).clickВ основном, когда операция нажимается на элемент метки, она переключается на страницу маршрутизации. вactiveзаключается в том, что метка активна (выделена цветом), когда она соответствует текущему маршруту,el-tagАнимация довольно тупая, поэтому ее отключили.
<template>
<div class="toolbar">
<el-tag
class="toolItem"
type="info"
:disable-transitions="false"
:closable="item.id != 0"
effect="plain"
v-for="(item,index) in getToolData"
:key="index"
:class="{active:$route.path == item.detail}"
@click="redirect(item)"
@close="closeToolItem(item)"
>
<span class="dot" v-if="$route.path == item.detail"></span>
{{item.name}}
</el-tag>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
methods: {
closeToolItem(item, index) {
this.$store.dispatch("clearToolBar", item);
this.$store.dispatch("clearCache", item.componentName);
},
redirect(item) {
this.$router.push({ path: item.detail });
}
},
computed: {
...mapGetters(["getToolData", "getCacheView"])
},
watch: {
// 监听路由变化自动dispatch一个action
$route() {
// 路由组件名称（自定义）
const componentName =this.$route.matched[0]["components"]["default"][ "name"];
// 路由组件path
const detail = this.$route.path;
// 当前路由需要显示到tab标签上名字，如“发布公告”
const name = this.$route.meta[0]["name"];
this.$store.dispatch("commitToolBar", { name, detail, componentName });
}
}
};
</script>
Жизненный циклactivatedа такжеdeactivated
Усыновленныйkeep-aliveКэшированный компонент маршрутизации, повторный ввод маршрута, компонент маршрутизации не будет воссоздан, поэтому он не будет запускать функцию жизненного цикла компонента (например,beforeCreate,mountedЖдать). Поэтому обновите или очистите данные на этой странице.vueпредоставляет намactivatedа такжеdeactivatedФункция жизненного цикла, которая будет запущена при повторном входе в компонент маршрутизации.activatedфункция, она сработает при выходеdeactivated.
<template>
<div> A page</div>
</template>
<script>
export default {
data(){
return {
form :{
name:'',
password:''
}
}
},
activated(){
this.getList()
},
deactivated(){
Object.keys(this.form).map(key => {
this.form[key] = ''
})
}
}
</script>
Суммировать
До сих пор было сделано что-то вродеwindow tabМетки, с точки зрения организации кода и дизайна, могут быть относительно четкими, чтобы увидеть принцип организации кода. Эта реализация в основном имитируетvue-element-adminЭто проект с открытым исходным кодом.
Ссылаться на:vue-element-admin