Vue.js якорь для div внутри одного и того же компонента

Вопрос:Я разрабатываю приложение Vue.js, и мне сложно связать привязку с определенным div внутри компонента. У меня есть следующий якорь: Porto, Portugal и следующий div: Я использую vue-router в хэш-режиме. Проблема в том, что всякий раз, когда я нажимаю кнопку "porto-button", она перенаправляет меня на страницу "home" ('/') Я использую Vue.js

Вопрос:

Я разрабатываю приложение Vue.js, и мне сложно связать привязку с определенным div внутри компонента.

У меня есть следующий якорь:

<a href=»#porto» class=»porto-button»>Porto, Portugal</a>

и следующий div:

<div id=»porto» class=»fl-porto»>

Я использую vue-router в хэш-режиме.

Проблема в том, что всякий раз, когда я нажимаю кнопку “porto-button”, она перенаправляет меня на страницу “home” (‘/’)

Я использую Vue.js 1.X, и я попытался использовать режим истории (URL без hashbang), но он дает мне ошибку cannot GET ‘/page’ при обновлении страницы.

Я что-то делаю неправильно? Что я могу сделать по этому поводу?

Лучший ответ:

Поскольку вы используете маршрутизатор в хеш-режиме, вы не сможете легко прокручивать его, потому что прокрутка до /#something фактически перенаправит вас на страницу “что-то”.

Вам придется эмулировать поведение прокрутки самостоятельно, попробуйте сделать что-то вроде этого:

//P.S. the code is written for Vue 2. //You will have to adjust it to Vue 1. //Your view: <a class=»porto-button» @click=»scrollMeTo(‘porto’)»>Porto, Portugal</a> … <div ref=»porto» class=»fl-porto»> //Your code: methods: { scrollMeTo(refName) { var element = this.$refs[refName]; var top = element.offsetTop; window.scrollTo(0, top); } }

Как это работает:

  • Установите ссылки через атрибут ref для элемента, который вы хотите прокрутить,
  • Напишите функцию, которая программно установит window.scrollY в top ссылочного элемента.
  • Выполнение задания:)

Обновление 1:

jsfiddle https://jsfiddle.net/5k4ptmqg/4/

Обновление 2:

Кажется, что в Vue 1 ref=»name» выглядел как el:name (docs), вот обновленный пример:

https://jsfiddle.net/5y3pkoyz/2/

Ответ №1

Что сработало для меня

<router-link to=»#leaders»>Leaders</router-link>

или динамический

<router-link :to=»‘#${subMenuItem.linkTarget}'» class=»page-submenu-list__link»> {{subMenuItem.linkTitle}} </router-link>

в роутере

routes:[], scrollBehavior (to, from, savedPosition) { //https://router.vuejs.org/guide/advanced/scroll-behavior.html if (to.hash) { return { selector: to.hash } } else if (savedPosition) { return savedPosition; } else { return { x: 0, y: 0 } } } Ответ №2

Другой метод заключается в использовании “scrollIntoView()”

Итак, код euvl остается в силе, за исключением того, что вы немного изменили бы метод:

new Vue({ el: ‘#app’, methods: { goto(refName) { var element = this.$els[refName]; element.scrollIntoView(); } } })

Если вы хотите получить фантазию и сделать прокрутку более плавной, вы даже можете добавить следующее:

element.scrollIntoView({ behavior: ‘smooth’ });

Обратите внимание, что для старых браузеров потребуется полифил.

Оцените статью
Добавить комментарий