【VueRouter】ページ切替時にアンカーリンクで遷移させるVueの設定

WEB制作
【VueRouter】ページ切替時にアンカーリンクで遷移させるVueの設定
目次

VueRouterでアンカーリンクを有効にする

to.hashでハッシュの値（例:#example）を取得できます。

Vue.use(Router);

export default new Router({
    mode: 'history',
    scrollBehavior: (to, from, savedPosition) => {
        if (savedPosition) {
            return savedPosition;
        }
        
        if (to.hash) {
            return {selector: to.hash}
        }

        return {x: 0, y: 0};
    },
    routes: []
})

ページ読み込み後、スクロールする

ページ読み込み後、スクロールさせるためには以下のように設定します。

Vue.use(Router);

export default new Router({
    mode: 'history',
    scrollBehavior: async (to, from, savedPosition) => {
        if (savedPosition) {
            return savedPosition;
        }

        const findEl = async (hash, x) => {
            return document.querySelector(hash) ||
                new Promise((resolve, reject) => {
                    if (x > 50) {
                        return resolve();
                    }
                    setTimeout(() => {
                        resolve(findEl(hash, ++x || 1));
                    }, 100);
                });
        }

        if (to.hash) {
            const el = await findEl(to.hash);

            if ('scrollBehavior' in document.documentElement.style) {
                return window.scrollTo({top: el.offsetTop, behavior: 'smooth'});
            } else {
                return window.scrollTo(0, el.offsetTop);
            }
        }

        return {x: 0, y: 0};
    },
    routes: []
})

Safariでも有効にする

Safariなどの一部のブラウザは、scroll-behaviorに対応していません。なので、scroll-behaviorが対応していないブラウザ用にpolyfillを読み込む必要があります。

import smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();

Vue.use(Router);

export default new Router({
    mode: 'history',
    scrollBehavior: async (to, from, savedPosition) => {
        if (savedPosition) {
            return savedPosition;
        }

        const findEl = async (hash, x) => {
            return document.querySelector(hash) ||
                new Promise((resolve, reject) => {
                    if (x > 50) {
                        return resolve();
                    }
                    setTimeout(() => {
                        resolve(findEl(hash, ++x || 1));
                    }, 100);
                });
        }

        if (to.hash) {
            const el = await findEl(to.hash);

            return window.scrollTo({top: el.offsetTop, behavior: 'smooth'});
        }

        return {x: 0, y: 0};
    },
    routes: []
})

router-linkにアンカーリンクを設定する

router-linkにアンカーリンクを設定するには、以下のようにします。

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