Поведение прокрутки VueJS не работает должным образом - PullRequest
Новая
       13

Поведение прокрутки VueJS не работает должным образом

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

Я пытаюсь сделать прокрутку для привязки с помощью scrollBehaviour в VueJS.

Обычно я меняю текущий маршрутизатор следующим образом: 

this.$router.push({path : 'componentName', name: 'componentName', hash: "#" + this.jumpToSearchField})

Мой VueRouter определяется как: 

const router = new VueRouter({
  routes: routes,
  base: '/base/',
  mode: 'history',
  scrollBehavior: function(to, from, savedPosition) {
    let position = {}
    if (to.hash) {
      position = {
        selector : to.hash
      };
    } else {
      position = {x : 0 , y : 0}
    }
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(position)
      }, 10)
    })
  }
});

Мои маршруты: 

[
  {
    path: '/settings/:settingsId',
    component: Settings,
    children: [
      {
        path: '',
        name: 'general',
        components: {
          default: General,
          summary: Summary
        }
      },
      {
        path: 'tab1',
        name: 'tab1',
        components: {
          default: tab1,
          summary: Summary
        }
      },
      {
        path: 'tab2',
        name: 'tab2',
        components: {
          default: tab2,
          summary: Summary
        }
      },
      {
        path: 'tab3',
        name: 'tab3',
        components: {
          default: tab3,
          summary: Summary
        }
      }
    ]
  },
  {
    path: '/*',
    component: Invalid
  }
];

Допустим, я нахожусь на tab1 компоненте, и я хотел бы перейти к привязке ' test ' на tab3 component

После router.push () Я вижу, что scrollBehavior сработал, и компонент переключается с tab1 на tab3 , а также изменяется URL (например, http://localhost:8080/tab1 до http://localhost:8080/tab3#test) но расположение окон не там, где якорь, а только в верхней части окна.

И, конечно, у меня есть textarea с id = "test" накомпонент tab3

Что может быть не так?

Ответы [ 2 ]

0 голосов
/ 26 июля 2019

Я не мог получить ни одно из git-решений по поводу этой работы, и это было очень неприятно.

В итоге у меня сработало следующее: 

const router = new Router({
    mode: 'history',
    routes: [...],
    scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    }
})

Я подключаю свое приложение VueJs к #app, чтобы быть уверенным, что оно доступно для выбора.

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

Проверьте поддержку vue-маршрутизаторов для этой функции:

https://router.vuejs.org/guide/advanced/scroll-behavior.html

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
      // , offset: { x: 0, y: 10 }
    }
  }
}
...