Vue-router scrollBehavior: Почему savePosition всегда равно {x: 0, y: 0}? - PullRequest
Новая
       15

Vue-router scrollBehavior: Почему savePosition всегда равно {x: 0, y: 0}?

0 голосов
/ 25 февраля 2019

Я видел несколько вопросов по SO, которые относятся к моей проблеме, но ни один из них не идентичен, и их решения не работают для меня, или они остаются без ответа (например, этот вопрос .

Я работаю над приложением Vue.js, которое включает в себя страницу списка. Когда пользователь нажимает на один из элементов в списке, маршрутизатор переходит на новую «страницу сведений». Затем, когда пользовательвозвращается (либо через кнопки браузера, либо через ссылку на странице, используя window.history.back(), я использую свойство scrollBehavior маршрутизатора, чтобы вернуть пользователя в исходное положение: 

scrollBehavior: (to, from, savedPosition) => {
  if (savedPosition) {
    return savedPosition;
  };
  return { x: 0, y: 0 };
};

К сожалению, когда пользователь переходит на страницу сведений, страница возвращается на верхнюю часть окна до перехода к компоненту страницы сведений, а затем, когда пользователь возвращается на страницу списка, savedPosition равно { x: 0, y: 0 }, что означает, что пользователь не вернулся в исходное положение.

Есть ли способ заставить vue-router сохранить положение компонента страницы списка?Связано ли это с тем, что страница переходит в верхний правый угол перед переходом к компоненту страницы сведений?

Если требуется дополнительная информация, пожалуйста, спросите.

1 Ответ

0 голосов
/ 21 марта 2019

Goodmorning,

Некоторое время я боролся с той же проблемой, где у меня есть несколько обзорных страниц, например, с новостями.И когда вы нажимаете на новость, вы переходите на страницу с подробностями (вверх), но когда вы возвращаетесь назад, вы попадаете в другое место на странице обзора.Также не нашел никакого решения, и ваш вопрос был почти таким же, как в моем случае, особенно: «это означает, что пользователь не вернулся в исходное положение».

Я только что заставил его работать с добавлением 'keep-alive »вокруг моего« роутера ».Может быть, это также может работать в вашем случае.Мой код в моем файле App.vue теперь: 

<template>
  <div id="app">

    <the-header/>

    <keep-alive><router-view/></keep-alive>

    <the-footer/>

    <back-to-top/>

  </div>
</template>

<script>
  //import 'bulma'

  import TheHeader from './components/TheHeader'
  import TheFooter from './components/TheFooter'
  import BackToTop from './components/BackToTop'
  import VueMarkdown from 'vue-markdown'

  export default {
    components: {
      TheHeader,
      TheFooter,
      BackToTop,
      VueMarkdown
    }
  }
</script>

<style lang="scss">
  @import "assets/global.styles";
</style>
...