0

Всем привет. К примеру есть страницы page1 и page2. На странице page1 есть ссылка которая введет на страницу page2, она находится на расстояние 1000px от топа. А на странице page2 есть кнопка, которая возвращает пользователя на страницу page1. Как после того как мы нажимаем на кнопку на странице page2 для перехода на страницу page1 вернуть нас на то же самое расстояние от топа?

Читал про функцию scrollBehavior, но откуда vue будет знать, откуда и на какой странице сохранять scroll position?

8
  • scroll position сохраняется если использовать history.back, но в контексте vue, вместо router-link на page2 - повесьте обработчик события click на ссылку и вызовите this.$router.back()
    – user303477
    Commented 26 июл. 2018 в 20:36
  • Сделал... На странице page2, чтобы вернуться на страницу page1 вызываю метод historyBack в котором вызываю this.$router.back() Commented 26 июл. 2018 в 20:43
  • Но scroll position не сохраняется Commented 26 июл. 2018 в 20:43
  • я подразумеваю, что у Вас какие-то динамические данные на page1, которые рендерятся через v-for?
    – user303477
    Commented 26 июл. 2018 в 20:43
  • Да, все правильно Commented 26 июл. 2018 в 20:44

1 ответ 1

1

Так как у Вас на 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>
3
  • А как-то по другому можно решить мою проблему? Commented 26 июл. 2018 в 23:07
  • @Евгений к сожалению, нет, самый последний вариант SSR (nuxt.js)
    – user303477
    Commented 28 июл. 2018 в 13:08
  • @overthesanity если я правильно понимаю, автор подразумевал использование роутера, в котором есть встроенный параметр scrollBehavior. Commented 31 июл. 2018 в 14:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.