VUE-Router 같은 페이지 에서 두 번 째 로 새로 고침 되 지 않 는 문 제 를 해결 합 니 다.
3517 단어 VUERouter새로 고침 하지 않 음
다음은 몇 가지 해결 방안 을 제공 하여 여러분 께 참고 하 겠 습 니 다.
1.새로 고침 한 페이지 에서 매개 변 수 를 정의 할 수 있 습 니 다.그러면 매번 다른 페이지 를 보 여 줍 니 다.
route 실례 화 이름 설정:
{
//
path: '/accountDetail/:randKey',
name: 'accountDetail',
component: accountDetail,
meta: {requiresAuth: true}
},
점프 하 는 곳 설정:
var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
var maxLength = 15;
var res = '_jsonpphotochange';
for (var i = 0; i < maxLength; i++) {
var id = Math.ceil(Math.random() * 35);
res += chars[id];
}
// res , :
this.$router.push('/accountDetail/' + paramsAccount);
2.전체 페이지 를 다시 불 러 올 수 있 습 니 다.이것 은 비교적 지루 하고 많 습 니 다.중요 한 것 은 다음 과 같 습 니 다.App.vue 에서 수정:
<template>
<div id="app" class="app">
<transition :key="key">
<router-view class="router-view"></router-view>
</transition>
</div>
</template>
<script type="text/ecmascript-6">
// import {mapState} from 'vuex';
export default {
name: 'app',
computed: {
key() {
return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date();
}
}
};
</script>
// template <transition></transition> key , 。
3.watch 는 경로 변 화 를 측정 합 니 다.단점 은 가끔 괜 히 두 번 씩 뛰 는 경우 가 있다 는 것 이다.즉,너 는 두 번 뛰 어야 한 다 는 것 이다.어떤 사람 은 들 어 오 면 한 번 씩 뛰 고 한 번 씩 집행 한다 고 말 하지만,나 는 그다지 닮 지 않 았 다 고 생각한다.누군가가 지적 해 줬 으 면 좋 겠 어 요.
watch: {
'$route' (to, from) {
this.httpGetUserInfo(); // ajax
}
}
// , , created() ajax 。
보충 지식:vue 페이지 전환 parmas 전 삼 의 리 셋 페이지 매개 변수 분실 문제 해결 방법앞에서 말 하 다.
오늘 문제 가 발생 했 습 니 다.vue 의 parmas 전 삼 을 통 해 해당 페이지 로 이동 하면 F5 가 전 달 된 매개 변 수 를 새로 고침 하면 사라 집 니 다.query 전송 인삼 으로 바 꾸 려 고 시도 하지만 프로젝트 의 경로 에 파 라 메 터 를 가 져 올 수 없 기 때문에 새로 고침 하면 페이지 를 찾 을 수 없습니다.바 이 두 는 오 랜 시간 동안 여러 번 시 도 했 고 마지막 에 방법 을 찾 았 습 니 다.나중에 필요 할 때 기억 하 세 요.주로 vuex 느낌 인지 local storage 가 이해 하기 쉬 운 지 모 르 겠 어 요...)
1.utils 폴 더 아래 새 localstorage.js 파일
2.저장 할 파일 에 localstorage.js 를 도입 하고 db.save 를 통 해 데 이 터 를 저장 합 니 다.
3.이동 한 페이지 에 localstorage.js 를 도입 하고 db.get 을 통 해 데 이 터 를 가 져 옵 니 다.
위 와 같은 VUE-Router 페이지 에서 두 번 째 로 새로 고침 되 지 않 는 문 제 를 해결 하 는 것 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 많은 응원 부 탁 드 리 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
VUE 기반 장치가 PC인지 모바일 포트인지 판단실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다. 그러면 현재 로그인 장치에 대한 판단이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.