우리 모두는 Vue의 가장 강력한 핵심이며 라우팅도 특히 귀여운 부분이라는 것을 알고 있습니다. 그러나 라우팅은 일부 대형 구성 요소에 적합하지만 때로는 URL 경로를 볼 때 변경 사항이 있습니다. 소규모 로컬 새로 고침의 경우 현재 동적 구성 요소를 사용해야 합니다.
Vue 자체에 유지되는
코드는 다음과 같습니다: SlotDome.vue:
<template> <div> <slot></slot> <slot name="wise"></slot> <el-radio-group v-modal="tabView"> <el-radio-button label="simple1" @click="toSim(1)"> <button>页面一</button></el-radio-button> <el-radio-button label="simple2" @click="toSim(2)"><button>页面二</button> </el-radio-button> </el-radio-group> <keep-alive> <component :is="tabView"></component> </keep-alive> </div> </template> <style rel="stylesheet/stylus"> el-radio-button &:hover cursor pointer </style> <script> import simple1 from "./simple/simple1.vue"; import simple2 from "./simple/simple2.vue"; export default{ data(){ return { tabView: "simple1" } }, methods: { toSim(index){ this.tabView = `simple${index}`; } }, components: { simple1, simple2 } } </script>
simple1.vue:
<template> <div> 这是页面一 <input type="text"> </div> </template>
simple2.vue:
<template> <div> 这是页面二 <input type="text"> </div> </template>
위의 예에서 tabView의 값이 변경되면
그러나 이런 방식으로 구성 요소가 전환될 때마다 모든 구성 요소가 다시 렌더링되므로 구성 요소의 데이터가 유지될 수 없습니다. 이때 재렌더링을 피하기 위해 연결 유지를 사용하여 구성 요소를 메모리에 유지할 수 있습니다.
페이지 효과는 다음과 같습니다.
관련 권장 사항:
더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 프로그래밍 소개! !
위 내용은 Vue는 부분 새로 고침을 어떻게 구현합니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!