IT이야기

vue-router에 router.reload가 있나요?

cyworld 2022. 7. 1. 21:55
반응형

vue-router에 router.reload가 있나요?

이 풀 요구에는 다음과 같은 내용이 있습니다.

  • router.reload()

    현재 경로를 사용하여 새로고침하고 데이터 후크를 다시 호출합니다.

그러나 Vue 컴포넌트에서 다음 명령을 실행하려고 하면

this.$router.reload()

다음의 에러가 표시됩니다.

Uncaught TypeError: this.$router.reload is not a function

의사록을 찾아봤지만 관련 내용을 찾을 수 없었습니다.vue/vue-router 프로바이더에는 이와 같은 기능이 있습니까?

관심 있는 소프트웨어 버전은 다음과 같습니다.

"vue": "^2.1.0",
"vue-router": "^2.0.3",

는 을 안다. 고고있있있있다다location.reload()대안 중 하나이지만, 저는 Vue의 네이티브 옵션을 찾고 있습니다.

this.$router.go()는 정확하게 이 작업을 수행합니다.인수가 지정되지 않은 경우 라우터는 현재 위치로 이동하여 페이지를 새로 고칩니다.

주의: 라우터와 그 이력 컴포넌트의 현재 실장에서는 파라미터가 옵션으로서 마크되어 있지 않습니다만, IMVHO는 에반 유측의 버그 또는 누락 중 하나입니다.스펙에서는 명시적으로 허가되어 있기 때문입니다.저는 그것에 대한 이슈 보고서를 제출했습니다.현재 TS의 주석이 정말로 궁금하다면 동등한 주석을 사용하십시오.this.$router.go(0)

'왜 그런가에 대해서: '왜 그런가'에 대해서:go으로 window.history.go, 「」, 「」와 windows.history.go()MDN 문서에 따라 페이지가 새로고침됩니다.

주의:" 수 즉, " " " " ( " " " " ) Firefox " " " " " " " " 를 합니다.window.location.reload(true);(대신 OP가 언급한 https://developer.mozilla.org/en-US/docs/Web/API/Location/reload)이 도움이 될 수 있습니다.FF에 관한 문제는 확실히 해결되었습니다.

가장 간단한 해결책은 :key Atribut을 에 추가하는 것입니다.

<router-view :key="$route.fullPath"></router-view>

이는 동일한 컴포넌트가 주소 지정되면 Vue Router가 변경을 인식하지 못하기 때문입니다.키를 사용하여 경로를 변경하면 구성 요소가 새 데이터로 새로고침됩니다.

this.$router.go(this.$router.currentRoute)

Vue-Router 문서:

GitHub vue-router 가 없는 것 .reload()더 이상 방법을 사용할 수 없습니다.파일에는 과 같은 것이 .currentRoute★★★★★★ 。

출처: vue-router/src/index.js
문서: 문서

get currentRoute (): ?Route {
    return this.history && this.history.current
  }

, 그럼 에는 '어울릴 수 .this.$router.go(this.$router.currentRoute)이치노

간단한 예.

이 답변의 버전:

"vue": "^2.1.0",
"vue-router": "^2.1.1"

router.go(0)타이프스크립트.

router.displaces

routes: [
{
  path: '/',
  component: test,
  meta: {
    reload: true,
  },
}]

main.discloss.main.discloss.

import router from './router';

new Vue({
  render: h => h(App),
  router,
  watch:{
    '$route' (to) {
       if(to.currentRoute.meta.reload==true){window.location.reload()}
  }
}).$mount('#app')

URL 루트를 해결하고 Javascript를 사용하여 창을 탐색합니다. 

        let r = this.$router.resolve({
        name: this.$route.name, // put your route information in
        params: this.$route.params, // put your route information in
        query: this.$route.query // put your route information in
      });
      window.location.assign(r.href)

이 방법을 사용하면 URL이 대체되고 페이지가 Vue.router에 의존하지 않고 전체 요청(새로 고침)을 수행합니다.$180.go는 이론상으로는 동작해야 하는데, 저는 동작하지 않습니다.

내가 다시 장전할 거야브라우저가 너무 이상해서. location.reload다시 로드할 수 없습니다.

methods:{
   reload: function(){
      this.isRouterAlive = false
      setTimeout(()=>{
         this.isRouterAlive = true
      },0)
   }
}

<router-view v-if="isRouterAlive"/>

`<router-link :to='`/products`' @click.native="$router.go()" class="sub-link"></router-link>`

현재 페이지를 새로고침하기 위해 시도했습니다.

페이지에서 특정 컴포넌트를 업데이트하려는 경우 다음과 같은 해결책이 있습니다.

템플릿 내

<Component1 :key="forceReload" />
<Component2 :key="forceReload" />

데이터 내

data() {
  return {
    forceReload: 0
  {
}

방법:

   Methods: {
     reload() {
        this.forceReload += 1
     }
   }

원하는 키를 사용하여 업데이트할 각 항목에 대해 데이터 속성에 바인딩합니다(일반적으로 단일 구성 요소(최대 2개)에만 필요합니다).더 필요하시면 다른 답변으로 페이지 전체를 새로 고치는 것이 좋습니다.

마이클 티센의 투고로부터 이 사실을 알게 되었습니다.https://medium.com/hackernoon/the-correct-way-to-force-vue-to-re-render-a-component-bde2caae34ad

2021년 12월 갱신:

:key="$route를 추가하여 구성 요소를 강제로 제거할 수 있습니다.fullPath"를 선택합니다.

하위 구성 요소의 경우:

<Child :key="$route.fullPath" />

라우터 뷰 태그의 경우:

<router-view :key="$route.fullPath" />

단, :key="$route.fullPath'는 다른 루트의 컴포넌트만 강제 새로고침할 수 있으며 같은 루트의 컴포넌트는 새로고침할 수 없습니다.같은 루트의 컴포넌트도 강제 적용할 수 있도록 하려면 :key="$route"에 배열을 포함한 "value"를 추가해야 합니다.fullPath"를 선택하고 "value"를 변경합니다.즉, :key=sublic$route가 됩니다.fullPath, value]"를 선택하고 "value"를 변경해야 합니다.

* 어레이를 :key=에 할당할 수 있습니다.

<template>
  <Child 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @childReload="reload" // Call @click="$emit('childReload')" in   
  />                      // Child Component to increment the value.
</template> 

    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR

<template>
  <router-view 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')"
  />                           // in Child Component to increment the value.
</template>
    
<script>
export default {
  name: "Parent", components: { Child, },
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    reload() {
      this.value++;
    }
  }
}
</script>

단, 양쪽 "$route"를 계속 사용합니다.fullPath"와 "value"는 때때로 오류를 발생시키므로 Click과 같은 이벤트가 발생한 경우에만 "$route"를 모두 사용합니다."fullPath" 및 "value"를 지정합니다.Click과 같은 이벤트가 발생하는 경우를 제외하고 항상 "$route"만 사용해야 합니다.fullPath"를 선택합니다.

마지막 코드는 다음과 같습니다.

<template>
  <Child 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @childReload="reload" // Call @click="$emit('childReload')" in
  />                      // Child Component to increment the value.
</template>
    
    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR
    
<template>
  <router-view 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')" in
  />                           // Child Component to increment the value.
</template>
        
<script>
export default {
  name: "Parent", components: { Child, },
  data() {
    return {
      state: true,
      value: 0,
    };
  },
  methods: {
    reload() {
      this.state = false;
      this.value++;
      this.$nextTick(() => this.state = true);
    }
  }
}
</script>

유감스럽게도 Vue에서는 컴포넌트를 강제로 새로고침할 수 있는 간단한 방법은 없습니다.그것이 해결해야 할 Vue의 문제입니다.

function removeHash () { 
    history.pushState("", document.title, window.location.pathname
                                          + window.location.search);
}


App.$router.replace({name:"my-route", hash: '#update'})
App.$router.replace({name:"my-route", hash: ' ', params: {a: 100} })
setTimeout(removeHash, 0)

주의:

  1. 그리고 그#그 뒤에 어떤 가치가 있어야 합니다.
  2. 두 번째 루트 해시는 공백 문자열이 아닌 공백입니다.
  3. setTimeout,것은 아니다.$nextTickurl을 깨끗하게 유지합니다.

렌더링을 위해 상위 구성 요소에서 사용할 수 있습니다.

<template>
  <div v-if="renderComponent">content</div>
</template>
<script>
export default {
   data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // Remove my-component from the DOM
        this.renderComponent = false;

        this.$nextTick(() => {
          // Add the component back in
          this.renderComponent = true;
        });
      }
    }
}
</script>

컴포넌트를 간단하게 새로고침/갱신할 수 있습니다.

<ProductGrid v-if="renderComponent"/>

<script>
import ProductGrid from "./product-grid";
export default {
  name:'product',
  components: {
    ProductGrid
  },
  data() {
    return {
      renderComponent: true,
    };
  },
  methods: {
    forceRerender: function() {
      // Remove my-component from the DOM
        this.renderComponent = false;
        this.$nextTick(() => {
            // Add the component back in
            this.renderComponent = true;
        });
    }
 },
 watch:{
    '$route.query.cid'(newId, oldId) {
        if(newId>0){
            this.forceRerender();
        }      
     }
  }
}
</script>

vueObject.$forceUpdate();

forceUpdate 메서드를 사용하는 이유는 무엇입니까?

window.location.reload();

이 명령을 사용하여 현재 페이지를 새로고침할 수 있습니다.Jquery에도 비슷한 용법이 있다.

언급URL : https://stackoverflow.com/questions/41301099/do-we-have-router-reload-in-vue-router

반응형
저작자표시

'IT이야기' 카테고리의 다른 글

특정 코드에 대한 소나 끄기  (0) 2022.07.01
Vue.js - 비반응 데이터를 하위 컴포넌트에 전달하는 방법  (0) 2022.07.01
서로 다른 프로펠러 이름을 가진 동일한 2개의 Vue.j 컴포넌트 결과가 다른 이유는 무엇입니까?  (0) 2022.07.01
Windows에서 C용 이클립스를 찾을 수 없습니다.  (0) 2022.07.01
vue 컴포넌트에서 모드가 닫힌 경우 드롭다운 데이터를 리셋하려면 어떻게 해야 합니까?  (0) 2022.07.01

'IT이야기'의 다른글

  • 현재글vue-router에 router.reload가 있나요?

관련글

댓글

티스토리툴바