Обработка позиции прокрутки дочернего маршрута vue-router в режиме хэширования - PullRequest
Новая
       7

Обработка позиции прокрутки дочернего маршрута vue-router в режиме хэширования

0 голосов
/ 09 января 2019

Я использую хэш-режим в моем приложении Vue-Cli. Далее у меня есть дочерние маршруты по одному маршруту. 

<template>
  <div style="position: relative;">    
   some other code which are common between two child routes
    </div>
    <div class='container' ref="container" >
      <router-view></router-view>
    </div>
  </div>
</template>

Положение прокрутки не сбрасывается в ноль (окно), когда я перемещаюсь между дочерними маршрутами, и это вызывает неожиданные прокрутки. далее, как уже упоминалось выше, я не смог справиться с этим через 

scrollBehavior (to, from, savedPosition) {
    // return desired position
  }

, поскольку я не использую режим истории.

Итак, я написал ниже код в дочерних маршрутах для обработки позиции прокрутки, 

created () {
  var oContainer = document.querySelector('.container')
  oContainer.scrollTop = 0
},
beforeRouteLeave (to, from, next) {
  var oContainer = document.querySelector('.container')
  oContainer.scrollTop = 0
  next()
},

и работает так, как мне нужно (сброс положения прокрутки для дочернего маршрута на ноль) Однако я не считаю это уместным, потому что

  • Предоставление селектора запросов в vue-cli вместо использования this. $ refs.container (но я не могу получить значение в $ refs даже в дочернем методе mount ())
  • В одной маршрутной навигации (не во всех) я хочу повторно применить положение прокрутки, когда пользователь возвращается к этому дочернему маршруту.

Есть ли другой способ решить эту проблему?

...