Nuxt.어떻게든 Js로 DOM을 직접 조작하고 싶어요.

배경

전제 조건으로 DOM을 직접 조작하기 전에 먼저 칠 수 있는 여러 가지 방법을 고려해 보세요
그럼, Nuxt.js를 사용하면 어떤 경우에도 DOM을 직접 조작하고 싶을 때가 있습니다.
예를 들어, 페이지 전환 후 대상 내부 링크/hoge#id로 자동으로 스크롤할 수 있습니다.
이 경우 라이프 사이클 이벤트와 직접 DOM 작업으로 이동하는 것 외에는 다른 방법이 없겠죠?이렇게 생각하면서 실제로 해 보았다.

tl;dr

mounted 및 nextTick 를 사용합니다.
mounted는 DOM 작업으로 스크롤해야 하기 때문에 사용합니다.
단, mounted는 하위 구성 요소의 마운트를 보장하지 않기 때문에, nextTick을 사용하면 렌더링이 끝날 때까지 (작업 대상 DOM이 있는지 확인) 리셋 함수를 실행하지 않는 것이 중요하다.
내부 링크가 지정된 id의 구성 요소에서 구성 요소를 호출하려면 하위 구성 요소에서 mounted와nextTick을 사용하십시오.

가동하다

기법은 vue-class-component를 따르므로 뇌내 전환을 잘 하세요
test.vue

<template>
　<div id="id">
　　<p>Please scroll</p>
　</div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";

@Component
export default class Child extends Vue {
  private mounted() {
    this.$nextTick(function() {
      const element = document.getElementById('id')
      if (!element) {
        return
      }
      // elementの位置座標を取得
      const rect = element.getBoundingClientRect()
      window.scrollTo(rect.left, rect.top)
    })
  }
}
</script>

<style>
</style>

내부 링크의 id가 없으면 스크롤하지 않고 끝납니다.

그 밖에

상기 상태를 유지하면 결정된 id에만 반응할 수 있기 때문에 아래와 같이 내부 링크가 증가할 때도 편리하다.
test.vue

<template>
　<div id="id">
   <p>Please scroll</p>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";

@Component
export default class Child extends Vue {
  private mounted() {
    this.$nextTick(function() {
      // url内のhash(#id)を取得する
      const hash = this.$route.hash
      if (hash.length === 0) {
        return
      }
      // hash.slice(1)でhashから「#」を取り除いておく
      const element = document.getElementById(hash.slice(1))
      if (!element) {
        return
      }
      const rect = element.getBoundingClientRect()
      window.scrollTo(rect.left, rect.top)
    })
  }
}
</script>

<style>
</style>

vue-router$route.hash를 사용하면 URL 내hash를 얻을 수 있기 때문에hash의 동적 변경에 따라 내부 링크로 스크롤할 수 있습니다.

마지막

귀찮아 보이지만 DOM을 직접 조작하기 전에 할 수 있는 것이 있는지 생각해 보는 것이 좋다.조금이라도 도움이 됐으면 좋겠다