Vue 라우터가 현재 경로를 새로고침합니다.

Vue 라우터가 현재 경로를 새로고침합니다.

페이지 전체를 새로고침하지 않고 vue 앱에서 현재 경로를 다시 새로고침해야 합니다(컴포넌트 새로고침만).

vue 라우터에 다음과 같은 경로가 있습니다.

{
  path: "/dashboard",
  name: "dashboard",
  component: loadView("Dashboard"),

},

사용자가 대시보드 탐색 항목을 클릭하면 vue 라우터 프로그래밍 탐색이 포함된 대시보드 페이지로 리디렉션됩니다.

this.$router.push({ name: "dashboard" });

그러나 사용자가 이미 대시보드 경로에 있고 사용자가 대시보드 탐색 항목을 다시 클릭하면 아무 일도 일어나지 않습니다.이것이 vue 라우터의 디폴트 동작이라고 생각합니다.그러나 Dashboard 구성 요소를 강제로 새로고침해야 합니다(페이지 전체를 새로 고치는 것은 아닙니다).

라우터가 업데이트되지 않아 Route Update 이전 버전을 사용할 수 없습니다.또한 나는 예전처럼 경비원들 앞에서 글로벌하게 시도해보았다.하지만 그것 또한 작동하지 않는다.

페이지 전체를 새로고침하지 않고 대시보드컴포넌트를 강제로 새로고침하려면 어떻게 해야 하나요?

그것은 두 가지 방법으로 할 수 있다.

1) VM을 실행해 보겠습니다.$forceUpdate(); 여기에 제시된 바와 같이

2) 자녀에게 키를 할당하는 전략을 취할 수 있지만 컴포넌트를 다시 렌더링하고 싶을 때는 키를 갱신하기만 하면 됩니다.

<template>
  <component-to-re-render :key="componentKey" />
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}
</script>

forceRender가 호출될 때마다 prop componentKey가 변경됩니다.이 경우 Vue는 컴포넌트를 파기하고 새로운 컴포넌트를 작성해야 함을 알게 됩니다.

그 결과, 자 컴포넌트가 자동적으로 재초기화되어 상태가 「리셋」됩니다.

여기에서는 언급하지 않았지만, 제공되는 솔루션은 앱을 올바르게 렌더링하기 위해서만 많은 추가 작업을 필요로 하기 때문에 imo는 취약한 솔루션입니다.우리는 방금 꽤 잘 작동하는 다른 솔루션을 구현했습니다.

완전 해킹이긴 하지만.

    if (this.$route.name === redirect.name) {
      // this is a filthy hack - the vue router will not reload the current page and then have vue update the view.
      // This hack routes to a generic page, then after this has happened the real redirect can happen
      // It happens on most devices too fast to be noticed by the human eye, and in addition does not do a window
      // redirect which breaks the mobile apps.
      await this.$router.push({
        name: RouteNames.ROUTE_REDIRECT_PLACEHOLDER
      });
    }

... now continue to do your normal redirect.

기본적으로 플레이스 홀더로 리다이렉트하여 응답을 기다린 후 실제로 이동하고자 하는 다른 페이지로 즉시 계속 진행합니다.

언급URL : https://stackoverflow.com/questions/55527883/vue-router-reloading-the-current-route