Vue는 정방향 새로 고침 효과를 구현합니다.

이번에는 vue에서 정방향 새로 고침 효과를 구현하는 방법을 알려드리겠습니다. vue에서 정방향 새로 고침 효과를 구현하기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

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

keep-alive 는 로드된 모든 인터페이스를 캐시하므로 반환 시 인터페이스를 삭제할 수 없으므로 다시 들어갈 때 인터페이스가 다시 로드되지 않습니다. 따라서 가장 먼저 생각나는 해결책은 인터페이스에서 반환 버튼을 클릭할 때 this.$destroy(true)를 호출하여 인터페이스를 파괴하는 것입니다. 그러나 물리적인 반환을 통해 반환하는 경우 모바일 android 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 장치에 물리적인 반환 키가 있습니다. 키, 처리할 수 없습니다. Android의 반환 이벤트를 다시 작성하여 js 메서드를 호출할 수 있지만 js의 전역 메서드가 호출되므로 최상위 계층의 인터페이스를 구체적으로 삭제할 수는 없습니다.

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

<keep-alive>
     <router-view v-if="$route.meta.keepAlive">
      <!-- 这里是会被缓存的视图组件 -->
     </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
     <!-- 这里是不被缓存的视图组件 -->
    </router-view>

추천 자료:

위 내용은 Vue는 정방향 새로 고침 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!