Как прокрутить до определенного якоря, используя ссылку маршрутизатора? - PullRequest
Новая
       20

Как прокрутить до определенного якоря, используя ссылку маршрутизатора?

0 голосов
/ 18 мая 2019

Я пытаюсь разработать простой веб-сайт, используя vue js, и пока все идет хорошо, но я сталкиваюсь со следующей проблемой:

Я использую маршрутизатор для смены страниц, он работает, ночто мне нужно сделать, это: изменить страницу и перейти к определенной привязке.

Что я уже пробовал:

Работает хорошо: путь к странице контакта или домой 

<router-link to="/contact">Contact</router-link>
<router-link to="/">Home</router-link>

Не работает: 

<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>

Последний работает, только если я на главной странице, но всякий раз, когда я перехожу на страницу контактов и пытаюсь перенаправить на "/ # technology", он не будетРабота.Он пытается перенаправить на «http://example.com/contact/#technology" вместо» http://example.com/#technology".

Если я сделаю это так, он просто прокрутится к началу, но не к якору: 

<router-link to="/#technology" Technology</router-link>

Мой код маршрутизатора: 

const routes = [
    { path: '/', component: Home },
{ path: '/contact', component: Contact }
]

const router = new VueRouter({
     mode: 'history',

     routes,
       scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;

        }

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


});

new Vue({
    router,
}).$mount('#app');

И шаблоны выглядят так (я удалил ненужный код): 

<template id="home">
<div>
Home
<div id="technology"> <!-- IT SHOULD SCROLL TO HERE -->
</div>
</template>

<template id="contact">
<div>
Contact Page
</div>
</template>

1 Ответ

0 голосов
/ 18 мая 2019

Я думаю, что вы на правильном пути.

, но, возможно, вы ошиблись при использовании Route name и path.

вместо 

<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>

попробуйте использовать path вместо name

<router-link :to="{ path: '/', hash: '#technology' }" >Technology</router-link>
...