최근에는 vue를 사용하여 모바일 프로젝트를 하려고 합니다. 앞으로 새로 고침 및 뒤로 새로 고치지 않는 효과를 얻으려고 합니다. 즉, 로드된 인터페이스를 캐시할 수 있고(반환 시 다시 로드할 필요 없음), 닫힌 인터페이스를 삭제(재진입 시 다시 로드)할 수 있습니다. 예를 들어 a->b->c는 앞으로(b,c) 이동하여 새로 고침되고, c->b->a는 새로 고치지 않고 뒤로(b,a) 이동합니다.
이 글에서는 Vue가 순방향 새로고침과 역방향 새로고침을 달성하는 효과를 주로 소개합니다. 즉, 로드된 인터페이스를 캐시할 수 있고(다시 로드하지 않고 반환) 닫힌 인터페이스를 삭제할 수 있습니다(재진입 시 다시 로드). 이 기사는 구현 아이디어를 공유할 것입니다. 필요한 친구가 이를 참조하여 모든 사람에게 도움이 되기를 바랍니다.
keep-alive
는 로드된 모든 인터페이스를 캐시하므로 반환 시 인터페이스를 삭제할 수 없으므로 다시 들어갈 때 인터페이스가 다시 로드되지 않습니다. 따라서 가장 먼저 생각나는 해결책은 인터페이스에서 반환 버튼을 클릭할 때 this.$destroy(true)
를 호출하여 인터페이스를 파괴하는 것입니다. 단, 모바일 안드로이드 기기에서는 물리적인 리턴키가 존재하게 되며, 물리적인 리턴키를 통해 리턴하는 경우에는 처리할 수 없습니다. Android의 return 이벤트를 다시 작성하여 js 메서드를 호출할 수 있지만 js의 전역 메서드가 호출되므로 최상위 인터페이스를 구체적으로 소멸할 수는 없습니다. keep-alive
会把所有加载的过的界面都缓存起来,没法实现返回时将界面销毁掉,导致再进入时没有重新加载这个界面。于是首先想到的方案是在点击界面上返回按钮的时候,调用 this.$destroy(true)
来将界面销毁掉。但是在移动端 android设备上会有物理返回键,如果通过物理返回键返回的话,就没法处理了。虽然可以重写android的返回事件,来调用js的方法,但是调用的是js的全局方法,没法具体让在最上层的那个界面销毁掉。
于是就需要另辟蹊径了。还好这篇文章给了我启发 vue-router 之 keep-alive ,多谢作者的分享。
要是能够知道路由是前进还是后退就好了,这样的话我就能在后退的时候让 from 路由的 keepAlive 置为 false , to 路由的 keepAlive 置为 ture ,就能在再次前进时,重新加载之前这个 keepAlive 被置为 false 的路由了。
废话不多说了,这里模拟有三个界面 login 到 server 到 main 。
首先我给这三个界面路由的 path 设置了严格的层级关系 ,并设置keepAlive都是true,默认都是需要缓存。
const router = new Router({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: Login, meta: { keepAlive: true } }, { path: '/login/server', component: ServerList, meta: { keepAlive: true } }, { path: '/login/server/main', component: Main, meta: { keepAlive: true } } ] })
由于这三个界面path的层级不同,我就能通过 beforeEach 这个钩子判断出什么时候是后退了。在后退时将 from 路由的 keepAlive 置为 false , to 路由的 keepAlive 置为 ture 。
router.beforeEach((to, from, next) => { const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length if (toDepth < fromDepth) { console.log('后退。。。') from.meta.keepAlive = false to.meta.keepAlive = true } next() })
最后需要缓存的界面用 keep-alive
더 이상 말도 안 됩니다. 여기서는 세 가지 인터페이스가 시뮬레이션됩니다. 서버에 로그인하여 메인에 로그인하세요.
우선 이 세 가지 인터페이스 경로의 경로에 대해 엄격한 계층 관계를 설정하고 기본적으로 캐싱이 필요한 keepAlive를 true로 설정했습니다. 🎜<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件 --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 这里是不被缓存的视图组件 --> </router-view>🎜이 세 가지 인터페이스의 경로는 서로 다른 수준에 있으므로 beforeEach 후크를 사용하여 언제 돌아갈지 결정할 수 있습니다. 돌아갈 때 원본 경로의 keepAlive를 false로 설정하고 대상 경로의 keepAlive를 true로 설정합니다. 🎜rrreee🎜 마지막으로 캐시해야 하는 인터페이스를
keep-alive
로 래핑하여 앞으로 이동할 때 새로 고치고 뒤로갈 때 새로 고치지 않는 효과를 얻습니다. 🎜rrreee🎜관련 추천: 🎜🎜🎜2018년 현재 페이지를 새로 고치는 가장 완벽한 js 코드 예제🎜🎜위 내용은 vue에서 새로 고침 없이 정방향 새로 고침 및 역방향 새로 고침을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!