Vue Router에서 앵커(북마크)를 처리하는 방법

Vue Router에서 앵커(북마크)를 처리하는 방법

Vue Router를 사용하여 페이지 내 앵커를 스마트하게 처리할 수 있는 방법을 찾고 있습니다.다음 사항을 고려하십시오.

<router-link to="#app">Apply Now</router-link>
<!-- some HTML markup in between... -->
<div id="app">...</div>

문서에 기재되어 있는 「앵커로의 스크롤」동작은, 다음의 경우를 제외하고 정상적으로 동작합니다.

• 닻을 클릭하면 닻을 클릭하면div id="app". 이제 에서 스크롤합니다.div앵커로 돌아가서 다시 클릭해 보세요.이때 당신은 아래로 점프하지 않습니다.div사실, 앵커는 수업을 계속합니다.router-link-activeURL에는 아직 해시가 포함되어 있습니다./#app;
• 위의 순서로 페이지를 리프레시하고(URL은 해시를 포함한다) 앵커를 클릭해도 아무 일도 일어나지 않습니다.

이것은 UX의 관점에서 매우 유감스러운 일입니다.잠재 고객이 애플리케이션 섹션에 도달하려면 수동으로 스크롤을 다시 내려야 하기 때문입니다.

Vue Router가 이 상황을 커버하는지 궁금합니다.참고로 라우터는 다음과 같습니다.

export default new VueRouter({
    routes,
    mode: 'history',
    scrollBehavior(to, from, savedPosition) {
        if (to.hash) {
            return { selector: to.hash }
        } else if (savedPosition) {
            return savedPosition;
        } else {
            return { x: 0, y: 0 }
        }
    }
})

리소스에서 문제를 해결할 수 있는 정보를 찾지 못했습니다.$route.hash당신의 안에서mounted고정 컴포넌트의 후크<router-view></router-view>새로고침 문제를 해결합니다.

<script>
export default {
  name: 'app',
  mounted: function()
  {
    // From testing, without a brief timeout, it won't work.
    setTimeout(() => this.scrollFix(this.$route.hash), 1);
  },
  methods: {
    scrollFix: function(hashbang)
    {
      location.hash = hashbang;
    }
  }
}
</script>

그런 다음 두 번째 클릭 문제를 해결하려면native에 바인드 합니다.<router-link></router-link>상당히 수동적인 프로세스이지만 동작합니다.

<router-link to="#scroll" @click.native="scrollFix('#scroll')">Scroll</router-link>

또, 라우터의 라우터에 대해서 할 수 있는 일이 있습니다.afterEach방법은 아직 알아내지 못했습니다.

IMO를 재사용하기 쉬운 솔루션:

this.$router.push({ name: 'home' }, undefined, () => { location.href = this.$route.hash })

세 번째 인수는 abort() 함수이기 때문에 바람직하지 않은 부작용이 있을 수 있습니다.

글로벌하게 사용하는 경우는, 라우터에 다음의 기능을 추가합니다.

pushWithAnchor: function (routeName, toHash) {
    const fromHash = Router.history.current.hash
    fromHash !== toHash || !fromHash
    ? Router.push({ name: routeName, hash: toHash })
    : Router.push({ name: routeName, hash: fromHash }, undefined, () => { window.location.href = toHash })
  }

또한 다음과 같은 구성 요소에 사용합니다.

this.$router.options.pushWithAnchor('home', '#fee-calculator-section')

템플릿 내에서 다음과 같은 작업을 수행할 수 있습니다.

<a @click="this.$router.options.pushWithAnchor('home', '#fee-calculator-section')"></a>

안타깝게도 스크롤 오프셋을 사용할 수 없습니다.

이미 해시가 있는 경로에 있는 경우 타겟으로 스크롤하도록 설정할 수 있습니다.

(또한 메모)scrollBehavior()라우터의 메서드는 이미 가려고 하는 경로에 있는 경우 호출되지 않습니다).

export default {
  methods: {
    anchorHashCheck() {
      if (window.location.hash === this.$route.hash) {
        const el = document.getElementById(this.$route.hash.slice(1))
        if (el) {
          window.scrollTo(0, el.offsetTop)
        }
      }
    },
  },
  mounted() {
    this.anchorHashCheck()
  },
}

다음으로 a를 추가합니다.@click.native내 앵커에 있는 이벤트를 듣다<router-link>,

<router-link :to="{hash: '#some-link'}" @click.native="anchorHashCheck">
  Some link
</router-link>

이 솔루션을 사용했습니다.

<router-link to="/about" @click.native="scrollFix('#team')" >The team</router-link>

그리고 이것은:

methods: {
    scrollFix: function(hash) {
      setTimeout(() => $('html, body').animate({
      scrollTop: $(hash).offset().top
      }, 1000), 1)
    }
  }

앵커에 대해 물어봤고 이미 답을 얻으셨다는 거 알아요단, 다음 기능은 앵커와 일반 링크 모두에서 작동합니다.루트가 일치한 컴포넌트의 첫 번째 인스턴스 위치까지 스크롤할 수 있습니다.앵커식 스크롤을 유지하면서 해시를 사용하여 우회할 수 있는지 알아보기 위해 작성했습니다.

scrollBehavior(to, from, savedPosition) {
  if (to.matched) {
    const children = to.matched[1].parent.instances.default.$children;
    for (let i = 0; i < children.length; i++) {
      let child = children[i];
      if (child.$options._componentTag === to.matched[1].components.default.name) {
        return {
          x: child.$el.offsetLeft,
          y: child.$el.offsetTop
        };
      }
    }
  }
  return {
    x: 0,
    y: 0
  };
}

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★를 사용하는 이유parent.instances는 그 is is is가to.matched[1].instances값이 비어 있습니다.가장 우아한 해결책은 아니지만 다른 사람에게 도움이 될 수도 있습니다.

참고: 이것은 구성 요소의 첫 번째 인스턴스를 스크롤하려는 경우에만 작동합니다.

언급URL : https://stackoverflow.com/questions/45201014/how-to-handle-anchors-bookmarks-with-vue-router