새로 고침 없이 연결 유지 페이지 반환을 사용하여 Vue 단일 페이지 문제 해결

아래에서는 Vue 단일 페이지에서 새로 고침 없이 연결 유지 페이지 반환을 사용하는 문제를 해결하는 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

Vue를 사용하여 단일 페이지 프로젝트를 개발할 때 매우 역겨운 문제에 직면했습니다. 목록 페이지에서 데이터 조각을 클릭하여 세부 정보 페이지로 들어가고, Return 키를 눌러 목록 페이지로 돌아가면, 페이지가 새로 고쳐집니다. 사용자 경험이 매우 나쁩니다. ! ! 관련 문제를 확인하고 를 사용하여 이 문제를 해결했습니다.

는 Vue에 내장된 구성 요소로, DOM의 반복 렌더링을 방지하기 위해 구성 요소 전환 중에 메모리에 상태를 유지할 수 있습니다.

먼저 App.vue 페이지에 다음 코드가 있습니다. 우리 모두는 이것이 페이지가 렌더링되는 위치라는 것을 알고 있습니다.

<router-view></router-view>

이 코드를 다음으로 변경하세요.

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

이 코드의 기능을 확인할 수 있습니다. 논리적 판단: 라우트의 메타 속성 중 keepAlive 속성 값이 true인 경우 페이지 상태가 저장되며 그 외의 경우에는 상태가 저장되지 않습니다.

그런 다음 경로에 대한 keepAlive 속성 값을 설정합니다. 예를 들어 홈페이지(목록 페이지)의 경로에 대해 keepAlive 속성을 true로 설정합니다.

{
name: 'index',
path: '/index',
title: '主页',
component(resolve) {
require(['views/index.vue'], resolve)
},
meta: {
pageTitle: '主页',
keepAlive: true
}
}

이 설정을 완료하면 홈페이지 상태가 저장되며, 리턴 키를 눌러 홈페이지로 돌아갈 때 페이지에서 요청 데이터를 새로 고치지 않습니다.

하지만 문제가 있습니다! ! ! 홈 페이지에서 다른 페이지로 이동했다가 다시 홈 페이지로 돌아가도 페이지가 새로 고쳐지지 않습니다! 이는 제가 원하는 것이 아닙니다. 세부정보 페이지에서 목록 페이지로 돌아갈 때 페이지를 새로고침하지 않아도 되는 경우가 있으므로 맞춤설정해야 합니다. 일반적인 아이디어는 홈페이지에서 다른 페이지로 이동할 때 홈페이지의 keepAlive 값을 false로 설정하고, 세부정보 페이지에서 홈페이지로 돌아올 때 홈페이지의 keepAlive 값을 true로 설정하는 것입니다.

코드는 다음과 같습니다.

홈페이지가 다른 페이지로 이동할 때 홈페이지의 keepAlive 값을 false로 설정하세요

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 //修改列表页的meta值，false时再次进入页面会重新请求数据。
 beforeRouteLeave(to, from, next) {
 from.meta.keepAlive = false;
 next();
 }
};

상세페이지에서 홈페이지로 돌아올 때 홈페이지의 keepAlive 값을 true로 설정하세요. 홈페이지로 돌아왔습니다)

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 if (to.path == "/index") {
 to.meta.keepAlive = true;
 } else {
 to.meta.keepAlive = false;
 }
 next();
 }
};

위 내용은 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

JS에서 EL 표현식을 사용하여 컨텍스트 매개변수 값을 얻는 방법

JS는 왼쪽 목록을 오른쪽 목록으로 이동하는 기능을 구현합니다.

js에서 el 표현식 사용 및 비어 있지 않은 판단 방법

위 내용은 새로 고침 없이 연결 유지 페이지 반환을 사용하여 Vue 단일 페이지 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!