Так как у Вас на page1
данные приходят с сервера и рендерятся каждый раз в v-for
, то очевидно, что scroll position
запоминаться не будет. Могу предложить Вам такой метод решения данной проблемы - создать сервис, который будет кешировать эти данные, чтобы каждый раз, переходя на page1
, не обращаться к БД, он должен быть синглтоном:
// cache.service.js
export class CacheService {
constructor() {
this.cache = {};
}
mutateCache(key, value) {
this.cache = {
...this.cache,
[key]: value
};
}
getCache() {
return this.cache;
}
}
Создаем "псевдо dependency injection", то есть инжектор, который будет инициализировать нужные нам сервисы только при первом доступе, эдакой lazy map
:
// di.js
import { CacheService } from './cache.service';
const injector = new WeakMap();
injector.set(CacheService, {
value: null,
factory: () => new CacheService()
});
export function getDependency(ctor) {
const entry = injector.get(ctor);
if (entry.factory) {
const factory = entry.factory;
entry.factory = null;
entry.value = factory();
}
return entry.value;
}
В компоненте page1
нам достаточно 1 раз получить данные с сервера и закешировать их:
<script>
import { getDependency } from './path-to/di.js';
import { CacheService } from './path-to/cache-service.js';
export default {
data() {
return {
someData: []
};
},
mounted() {
const service = getDependency(CacheService);
const cache = service.getCache();
if (!cache.someData) {
makeSomeApiCall().then((someData) => {
this.$data.someData = someData;
service.mutateCache('someData', this.$data.someData);
});
} else {
this.$data.someData = cache.someData;
}
}
};
</script>
Вариант с использованием vuex
:
yarn add [email protected]
Создаем папку store
и подключаем плагин:
// store/index.js
import Vuex, { Store } from 'vuex';
Vue.use(Vuex);
export const store = new Store({
state: {
someData: []
},
mutations: {
setData(state, { someData }) {
state.someData = someData;
}
}
});
Передаем store
параметром в конструктор Vue
при создании приложения:
import { store } from './path-to/store';
new Vue({
...,
...,
store,
render: (h) => ....
}).$mount('#app');
Теперь можем напрямую использовать в компоненте через свойство $store
:
<template>
<div class="page-1">
<div v-for="data in someData">{{ data }}</div>
</div>
</template>
<script>
import { store } from './path-to/store';
export default {
computed: {
someData: () => this.$store.state.someData
},
mounted() {
if (this.$store.state.someData.length > 0) {
return;
}
makeSomeApiCall().then((someData) => {
this.$store.commit('setData', { someData });
});
}
};
</script>
history.back
, но в контекстеvue
, вместоrouter-link
наpage2
- повесьте обработчик событияclick
на ссылку и вызовитеthis.$router.back()
page2
, чтобы вернуться на страницуpage1
вызываю методhistoryBack
в котором вызываюthis.$router.back()
page1
, которые рендерятся черезv-for
?