vue-router에 router.reload가 있습니까?

Question 1

이 풀 요청 에서 볼 수 있습니다 .

을 추가하다 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 옵션을 찾고 있습니다.

Question 2

this.$router.go()정확히 이것을합니다. 인수를 지정하지 않으면 라우터가 현재 위치로 이동하여 페이지를 새로 고칩니다.

_{참고 : 라우터 및 해당 히스토리 구성 요소 의 현재 구현은 매개 변수를 선택 사항으로 표시하지 않지만 IMVHO 는 사양에서 명시 적으로 허용하기 때문에 Evan You의 부분에서 버그 또는 누락입니다 . 이에 대한 문제 보고서를 제출했습니다. 현재 TS 주석에 정말로 관심이 있다면 동등한 것을 사용하십시오.this.$router.go(0)}

'왜 그렇습니까?'에 관해서 : go내부적으로 인수를에 전달 window.history.go하므로 같음 -MDN 문서에windows.history.go() 따라 페이지를 다시로드합니다 .

_{참고 : 이것은 일반 데스크탑 (휴대용이 아닌) Firefox에서 "소프트"재로드를 실행하기 때문에 사용하는 경우 이상한 기이 한 현상이 나타날 수 있지만 실제로는 재로드가 필요합니다. 대신 OP에서 언급 한 window.location.reload(true);( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload )를 사용하면 도움이 될 수 있습니다. 확실히 FF에서 내 문제를 해결했습니다.}

Question 3

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

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

이는 Vue Router가 동일한 구성 요소가 처리되는 경우 변경 사항을 인식하지 않기 때문입니다. 키를 사용하여 경로를 변경하면 새 데이터로 구성 요소가 다시로드됩니다.

Question 4

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

Vue-Router 문서 :

GitHub에서 vue-router repo를 확인했는데 reload()더 이상 방법 이없는 것 같습니다 . 그러나 같은 파일에는 currentRouteobject가 있습니다.

출처 : 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"

Question 5

router.go(0)Typescript를 사용하고 go 메서드에 대한 인수를 요청하는 경우 사용하십시오 .

Question 6

router.js

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

main.js

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')

Question 7

내 재 장전입니다. 일부 브라우저 때문에 매우 이상합니다. location.reload다시로드 할 수 없습니다.

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

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

Question 8

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에 의존하지 않고 전체 요청 (새로 고침)을 수행하도록합니다. $ router.go는 이론적으로는되지만 나에게 똑같이 작동하지 않습니다.

Question 9

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

현재 페이지를 다시로드하기 위해 이것을 시도했습니다.

Question 10

vueObject.$forceUpdate();

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

Question 11

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)

메모:

그리고 그 #뒤에는 어떤 가치 가 있어야합니다.
두 번째 경로 해시는 빈 문자열이 아니라 공백입니다.
setTimeout, $nextTickURL을 깨끗하게 유지 하지 마십시오 .

Question 12

rerender의 경우 부모 구성 요소에서 사용할 수 있습니다.

<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>