집 >웹 프론트엔드 >JS 튜토리얼 >Vue는 정방향 새로 고침 효과를 구현합니다.

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

php中世界最好的语言원래의: 2018-03-23 10:11:251562검색

이번에는 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를 유지하도록 영감을 주었습니다. 공유해 주신 작성자에게 감사드립니다. 라우팅

이 정방향인지 역방향인지 알 수 있어서 갈 수 있으면 좋을 것 같아요 backward from 경로의 keepAlive를 false로 설정하고 to 경로의 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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!