vue에서 앞으로 새로 고침 및 뒤로 새로 고침되지 않는 효과를 얻는 방법

이 글에서는 주로 Vue의 순방향 새로고침 및 역방향 새로고침 안 함 효과에 대해 소개합니다. 즉, 로드된 인터페이스는 캐시될 수 있고(다시 로드하지 않고 반환) 닫힌 인터페이스는 삭제될 수 있습니다(재진입 시 다시 로드). 이 글은 구현 아이디어를 공유할 것입니다. 필요한 친구들은 참고할 수 있습니다.

저는 최근에 vue를 사용하여 모바일 프로젝트를 시도하고 있습니다. 앞으로 새로 고침 및 뒤로 새로 고치지 않는 효과를 얻으려고 합니다. 즉, 로드된 인터페이스를 캐시할 수 있고(반환 시 다시 로드할 필요 없음), 닫힌 인터페이스를 삭제(재진입 시 다시 로드)할 수 있습니다. 예를 들어 a->b->c는 앞으로(b,c) 이동하여 새로 고침되고, c->b->a는 새로 고치지 않고 뒤로(b,a) 이동합니다.

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(&#39;后退。。。&#39;)
  from.meta.keepAlive = false
  to.meta.keepAlive = true
 }
 next()
})

最后需要缓存的界面用 keep-alive

그래서 우리는 다른 방법을 찾아야 합니다. 다행히도 이 기사는 나에게 vue-router를 유지하도록 영감을 주었습니다. 공유해 주신 작성자에게 감사드립니다.

이런 식으로 출발 경로의 keepAlive를 false로 설정하고, 역방향으로 갈 때 to 경로의 keepAlive를 true로 설정할 수 있다면 좋을 것 같습니다. 다시 로드하기 전에 다시 앞으로 나아갈 때 해당 경로의 keepAlive를 true로 설정합니다. 이 경로에는 keepAlive가 false로 설정되어 있습니다.

더 이상 말도 안 됩니다. 여기서는 세 가지 인터페이스가 시뮬레이션됩니다. 서버에 로그인하여 메인에 로그인하세요.

우선 이 세 가지 인터페이스 경로의 경로에 대해 엄격한 계층 관계를 설정하고 기본적으로 캐싱이 필요한 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

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

🎜반응 서버 렌더링 구현 문제에 대해 자세히 설명 🎜🎜🎜🎜jquery를 사용하여 PC 측 캐러셀을 작성하는 방법(자세한 튜토리얼) 🎜🎜🎜🎜Vue에서 헤더 구성 요소를 통해 개발하는 방법( 자세한 튜토리얼) 🎜🎜

위 내용은 vue에서 앞으로 새로 고침 및 뒤로 새로 고침되지 않는 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!