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을 직접 조작하기 전에 할 수 있는 것이 있는지 생각해 보는 것이 좋다.조금이나마 도움이 됐으면 좋겠네요