Vue.js. ссылки с href="#anchor" перезагружают страницу

Question

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

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

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

Answer 1

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>

Answer 2

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

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

 <a @click="scrollMeTo('test')">Test</a>
 <div ref="test">...</div>
 ...
 methods: {
   scrollMeTo(ref) {
       window.scrollTo(0, this.$refs[ref].offsetTop);
   }
 }

Переопределить ScrollBehavior в роутере:

 scrollBehavior (to, from, savedPosition) {
     if (to.hash) {
         return { selector: to.hash }
     } else if (savedPosition) {
         return savedPosition;
     } else {
         return { x: 0, y: 0 }
     }
 }

Использовать пакет vue-scrollto.

БЛОГ НА HUSL

Vue.js. ссылки с href="#anchor" перезагружают страницу

Ответы (2 шт):