Vue 세 가지 방법 으로 페이지 새로 고침

1952 단어 Vue페이지 새로 고침
저 희 는 프로젝트 를 쓸 때 자주 만 납 니 다.사용자 가 특정한 동작 을 수행 하고 어떤 상 태 를 바 꾸 었 습 니 다.페이지 를 다시 새로 고침 하여 페이지 를 다시 렌 더 링 해 야 합 니 다.예 를 들 어 사용자 로그 인 성공,증가,삭제,업데이트 등.
  • 원시 적 인 방법:
    • 
location.reload();
  • vue 자체 의 경로 전환:
    • 
this.$router.go(0);
    사용 한 사람들 은 모두 앞의 두 가 지 는 모두 페이지 를 강제로 새로 고침 하면 짧 은 반 짝 임 이 나타 나 고 사용자 체험 효과 가 좋 지 않다 는 것 을 알 고 있다.
    그래서 우 리 는 세 번 째 방식 을 선택한다.
  • 먼저 App 에 다음 과 같은 코드 를 적 으 세 요.
    • 
<template>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {    //      provide     ，       inject     。                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true                    //           
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;            //   ，
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //   
                }) 
            }
        }，
    }
</script>
    다음 페이지 를 새로 고 쳐 야 할 구성 요소 에 이렇게 쓸 수 있 습 니 다.
    
export default {
    inject:['reload'],                                 //  App  reload  
    data () {
        return {
    	.......
        }
    },
    페이지 새로 고침 이 필요 한 코드 블록 에서 사용:
    Vue 가 사용 하 는 세 가지 방법 으로 페이지 를 새로 고침 하 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 새로 고침 페이지 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!
    Node.js 정지점 전송 실현
    Vue 전단 고 효율 개발 목록 렌 더 링 명령

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage