1

Проект на vue-cli2, подключен vue-router

Ссылки приходят в контенте от сервера, по запросу, например <a href="#block1"... при клике по ним, вместо прокрутки до нужного блока, происходит перезагрузка страницы

  • как сделать рабочими стандартные якоря в обычных ссылках?
  • как сформировать из обычных ссылок router-link, чтобы не было перезагрузки страницы при клике по ним?

2 ответа 2

0

Vue не понимает обращение #block1,

<a @click="anchor('block1')">test</a>

block1 это наименование ref элемента на который ведет сам якорь

anchor(link) {
    var element = this.$refs[link];
    var top = element.offsetTop;

    window.scrollTo(0, top);
  }

и на элементе на который нужен спуск укажи ref

<span ref="block1"></span>

0

Скорее всего Вы используете vue-router в режиме hash. Стандартные якори в этом случае не будут работать. Есть несколько вариантов для решения проблемы:

  1. Использовать через @click метод:

     <a @click="scrollMeTo('test')">Test</a>
     <div ref="test">...</div>
     ...
     methods: {
       scrollMeTo(ref) {
           window.scrollTo(0, this.$refs[ref].offsetTop);
       }
     }
    
  2. Переопределить ScrollBehavior в роутере:

     scrollBehavior (to, from, savedPosition) {
         if (to.hash) {
             return { selector: to.hash }
         } else if (savedPosition) {
             return savedPosition;
         } else {
             return { x: 0, y: 0 }
         }
     }
    
  3. Использовать пакет vue-scrollto.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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