Как создать теги привязки с помощью Vue Router

Я создаю небольшой Vue webapp, я хочу создать тег привязки в этом.

Я дал id одному из div, я хотел иметь якорные теги, подобные этому:

<div id="for-home">
   ....
</div>

И вот моя конфигурация маршрутизатора:

export default new Router({
  abstract: true,
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    { path: '/', component: abcView}
  ]
})

Но с этими якорными тегами иногда работают, а иногда и не работают, я что-то пропустил?

Ответ 1

Я полагаю, что вы спрашиваете о переходе непосредственно к определенной области страницы, переходя к якорному тегу, подобному #section-3 на странице.

Чтобы это работало, вам нужно изменить функцию scrollBehavior следующим образом:

new VueRouter({
    mode: 'history',
    scrollBehavior: function(to, from, savedPosition) {
        if (to.hash) {
            return {selector: to.hash}
        } else {
            return { x: 0, y: 0 }
        }
    },
    routes: [
        {path: '/', component: abcView},
        // your routes
    ]
});

Ссылка: https://router.vuejs.org/guide/advanced/scroll-behavior.html#async-scrolling

Я попытался создать пример jsFiddle, но он не работает из-за mode:'history'. Если вы скопируете код и запустите его локально, вы увидите, как он работает: https://jsfiddle.net/mani04/gucLhzaL/

Возвращая {selector: to.hash} в scrollBehavior, вы передадите хеш якорного тега следующему маршруту, который перейдет к соответствующему разделу (отмеченному с помощью id) на этом маршруте.

Ответ 2

Я тоже столкнулся с этой проблемой, и я подумал, что есть немного места для оптимизации обмена страницей. В моем случае я бы хотел сделать плавный переход, а не "прыгать вокруг". Я уже требовал в jQuery как псевдоним для $.

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

// Register Router and Paths
const router = new VueRouter({
    mode: 'history',
    routes : [
        { path: '/aboutme/', component: index, name:'me.index'},
        { path: '/aboutme/cv', component: cv, name:'me.cv' }
    ],

    // Build smooth transition logic with $
    scrollBehavior (to, from, savedPosition) {
       if (to.hash) {
          return $('html,body').stop().animate({scrollTop: $(to.hash).offset().top }, 1000);
       } else {
          return $('html,body').stop().animate({scrollTop: 0 }, 500);
       }
    }
})

Боковой вопрос на моей стороне: мы должны что-то вернуть? У меня нет проблем с возвратом или без него, потому что jQuery Animation обрабатывает прокрутку страницы.

считает Гкойкан

Ответ 3

Если вам нужно сделать анимированный скролл, я использую пакет vue-scrollTo: его очень легко настроить.

Примеры с документами и кодом можно найти здесь: https://rigor789.github.io/vue-scrollto/