Vue 메뉴가 새로 고쳐지지 않으면 어떻게 해야 하나요?

vue 메뉴가 새로 고쳐지지 않는 해결 방법: 1. 인덱스 페이지에 "99df3d3b411e1be071f4ada3d31f1e18dd6e4ababe59793a4ac75fb9e5c5550e"를 작성합니다. 3. 라우터 파일에서 "{path: '/Material',name: 'Material'...}"을 구성합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue 버전 3, Dell G3 컴퓨터.

Vue 메뉴가 새로 고쳐지지 않으면 어떻게 해야 하나요?

vue는 페이지를 새로 고치지 않고 구성 요소 전환 탭(메뉴) 페이지를 실현합니다.

vue는 페이지를 새로 고치지 않고 구성 요소 전환 탭(메뉴) 페이지를 실현합니다(살아남기 유지)

7c9485ff8c3cba5ae9343ed63c2dc3f7 DOM의 반복 렌더링을 방지하기 위해 구성 요소를 전환하는 동안 메모리에 상태를 유지할 수 있는 Vue 구성 요소입니다.

공식 웹사이트 설명

7c9485ff8c3cba5ae9343ed63c2dc3f7동적 구성 요소를 래핑할 때 비활성 구성 요소 인스턴스는 파괴되는 대신 캐시됩니다. 와 유사하게 추상 구성 요소입니다. 자체적으로 DOM 요소를 렌더링하지도 않고 상위 구성 요소 체인에도 나타나지도 않습니다. 내에서 구성 요소가 전환되면 활성화 및 비활성화되는 두 가지 수명 주기 후크 기능이 그에 따라 실행됩니다. 2.2.0 이상에서는 활성화 및 비활성화가 트리 내의 모든 중첩 구성 요소에서 실행됩니다. 주로 구성 요소 상태를 유지하거나 다시 렌더링을 방지하는 데 사용됩니다.

응용 시나리오

예를 들어, 구성 요소 전환 기능을 갖춘 시스템을 구축할 때 일반적으로 레이블은 인덱스 페이지에 배치되고 라우터 파일에 구성된 상위-하위 구성 요소 관계 및 경로 점프와 결합되어 실현됩니다. 구성 요소 렌더링 페이지. 그러나 이로 인해 구성 요소를 클릭할 때마다 페이지가 다시 렌더링되고 페이지의 데이터가 유지되지 않습니다. 따라서 62fd61a4bda39e5f3eeccf86eb0f077c 태그로 래핑된 7c9485ff8c3cba5ae9343ed63c2dc3f7 태그를 사용하면 비활성 구성요소를 캐시하고 반환 후에도 원래 정보를 유지할 수 있습니다.

특정 코드

인덱스 페이지에 다음 코드를 작성하세요

// 需要缓存的组件
<keep-alive v-if="showView">
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
// 不需要缓存的组件
<router-view v-if="!$route.meta.keepAlive"></router-view>

이름이 test-keep-alive인 구성 요소를 캐시하세요. 여기서 포함은 캐시이고 제외는 캐시가 아닙니다

// 将缓存name为test-keep-alive的组件
<keep-alive include="test-keep-alive">
  <component></component>
</keep-alive>
// 将缓存name为teat,teat2的组件
<keep-alive include="teat,teat2">
  <component></component>
</keep-alive>

에서 다음 코드를 구성하세요. 라우터 파일

// 需要缓存的组件
{
    path: '/Material',
    name: 'Material',
    aliasName: '物料信息',
    meta:{keepAlive: true}, // 是否缓存组件
    component: () => import('../components/Material/index.vue'),
},
{
    path: '/Unit',
    name: 'Unit',
    aliasName: '单位信息',
    component: () => import('../components/Unit/index.vue'),
}

추천 학습: "vue.js 비디오 튜토리얼"

위 내용은 Vue 메뉴가 새로 고쳐지지 않으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!