Вопрос:
Я разрабатываю приложение 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’ });
Обратите внимание, что для старых браузеров потребуется полифил.
