[VUE.JS]How to link to an anchor point when using the Vue Router

In a project using Vue.js, we implemented a button that links to an anchor point in the page.
Simply

<a href="#xxxx">Test link</a>

If implemented above, it will link to the anchor, but the URL of the page is #xxxx.
Until reloading, it was working fine, but when I reloaded it, it was pure white!
Depending on the configuration of the Vue Router, the anchor may not work in the first place.
So, it was solved as follows.

Scroll to anchor point in scrollIntoView

First, let's go to the anchor in the same page.
It's a way to move it using javascript.
It is simple, but there is no blur.

// button part
<a class="btn-primary" @click="scrollToAnchorPoint('testBlock')">
    Scroll Test
</a>

// anchor point
<div ref="testBlock">
    In page anchor point
</div>

//  methods
<script>
export default{
    ...
    methods: {
        scrollToAnchorPoint(refName) {
            const el = this.$refs[refName]
            el.scrollIntoView({ behavior: 'smooth'})
        }
    }
}
</script>

If you want to access DOM elements in Vue.js, name them by ref.
You can $refs elements with this.$refs.
The behavior defines how to scroll.

Link to an anchor point from another page

This is the method if you want to link from an external page to an anchor point.
Implement to read and navigate the hash of the URL.

How to add hash to routerlink

Write it as follows:

//not bind
<router-link to="/testpage#testBlock">
    Link to TestBlock in TestPage
</router-link>

//use bind
<router-link
    :to="{
        name: 'testPage',
        hash: '#testBlock'
    }"
>
    Link to TestBlock in TestPage
</router-link>

Scroll from hash to anchor point

Scroll from the hash received at the URL to the appropriate point.

export default{
    data: function(){
        return {
            hash: this.$route.hash,
        }
    },
    mounted() {
        this.$nextTick(function () {
            if (this.hash) {
                const refName = this.hash.replace('#', '')
                this.scrollToAnchorPoint(refName)
            }
        })
    },
    methods: {
        scrollToAnchorPoint(refName) {
            const el = this.$refs[refName]
            el.scrollIntoView({ behavior: 'smooth' })
        }
    }
}

Getting a hash in this.$route.hash.
I want to run scrollToAncorPoint after the DOM is generated.
this.$nextTick() to wait for DOM updated.

If you use a lot of images (image, etc.) on the screen

If you use a lot of images at the page, misaligning occurs when the DOM is generated and does not scroll to the correct location.
This can be solved by specifying the height of the DOM.
Example)

<div style="height: 400px;">
    <img src="/image/test.png">
</div>

The point to note is to specify the height for the outer element, not the height of the image itself.
However, I think that it is impossible to specify the height for all.
In that case, you can also delay the execution of the function.

mounted() {
    this.$nextTick(function () {
        if (this.hash) {
            const refName = this.hash.replace('#', '')
            setTimeout(() => {
                this.scrollToAnchorPoint(refName)
            }, 100)
        }
    })
},

Delay execution with setTimeout.
Please adjust the delay time by the amount of the page.

I had a hard time implementing anchor points that I thought would end in 5 minutes, so I made it into an article.

VUE.JS Recommended Books

I think that you are a reader of books, but I realize that you can learn more deeply by implementing them in the field.
On the other hand, if you focus on implementation, you will not be able to think of better coding, so it is recommended that you read the book again.
Vue.js 3 Cookbook: Discover actionable solutions for building modern web apps with the latest Vue features and TypeScript

Tweet