Vue 라우터 인아웃페이지 이행: 오래된 루트가 표시된 상태에서 새로운 루트로 이행한다.

Vue 라우터 인아웃페이지 이행: 오래된 루트가 표시된 상태에서 새로운 루트로 이행한다.

달성하려는 목표를 설명하고 각 메커니즘에 대해 개별적으로 논의 및 학습하기 위해 이 문제를 두 가지 독립적인 과제로 나눕니다.

1. 새로운 루트가 이행할 때까지 이전 루트를 표시해 둡니다.

되어 있는지, 있는지, 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」, 「」.in-out기존 루트가 다음 루트의 이행이 완료될 때까지(예를 들어 이전 루트보다 오버레이됨) 기존 루트가 표시 가능한 상태로 유지됩니다.이 섹션의 마지막 예에서 설명한 바와 같이, https://vuejs.org/v2/guide/transitions.html#Transition-Modes,은 2개의 버튼을 표시하고 있습니다.in-out대신 전환이 발생하지 않고 지정된 전환 시간의 절반에 경로를 정적으로 플립합니다.

의 「」, 「」, 「」, 「」, 「」의 「」가.router-view한 번에 1개만 유지할 수 있기 때문에 인아웃이 불가능합니까?

편집 1:

보니, 나는 그 사실을 알게 되었다.in-out실제로 와 함께만 작동한다.position:absolute이치노라우터 이행시에만 절대적인 위치를 설정할 수 있는 그런 동작을 우아하게 포함시킬 수 있는 방법이 있을까요?

업 adding 각인인모모모모모모모모 （ 모 : in - out ） : : current : 추 current 。style="position:absolute; z-index:2100"하다그런 다음 기본 전환이 표시된 후 역방향 숨기기 효과(모드: out-in)를 얻기 위해 변경해야 합니다.

아래의 EDIT 2도 참조해 주세요.

---

2. 다른 기존 페이지 위로 이동하면 열리는 모달 같은 페이지(루트)를 만듭니다.

앱에 두 번째 라우터 뷰를 추가하여 그 동작을 해킹하려고 했습니다.표시하다

<router-view />
<router-view name="dialog" />

특정 컴포넌트는 다음과 같이 내 루트에 추가됩니다.

{
    path: 'records/new',
    components: {
      dialog: () => import('layouts/NewRecord.vue')
    },
    children: [
      {
        name: 'new-record',
        path: '',
        component: () =>
          import('src/pages/NewRecord.vue')
      }
    ]
  }

이 방법이 말이 되는지는 모르겠지만 제대로 작동시킬 수 없었다. 것을 입니다.router-view name="dialog「다이얼로그」패스가 푸시 될 때마다, 애니메이션(업)이 가능하지만, 다른 라우터 뷰는 아래에 표시됩니다.결국 여기서도 같은 문제에 직면하게 될 것입니다.루트가 변경되면 경로가 현재 위치와 일치하지 않기 때문에 초기 라우터 뷰는 컴포넌트를 폐기합니다.

어느 쪽이든, 보다 많은 경험과 전문 지식을 가진 사람들이 있기 때문에, 제가 무엇을 달성하려고 하는지 설명할 수 있기를 바라며, 여러분의 의견을 읽는 것이 궁금하고 감사할 따름입니다.

편집 2

커스텀으로 포장된 한 개로 내가 원하는 대로 일을 할 수 있었다.page-transition요소.이건 꽤 해킹이지만, 나는 추가 할 필요가 있었다.position: absolute실제로 모든 컴포넌트에 페이지 리셋을 할 수 있다('리셋'과 '리셋' 컴포넌트 모두 필요)position: absolute를 참조해 주세요.분명 더 좋은 방법이 있을 텐데 아직 못 찾았어요.

커스텀 페이지 전환 컴포넌트:

<template>
    <transition :name="name" :mode="mode">
        <slot/>
    </transition>
</template>

<script lang="ts">
  import { Component, Watch } from 'vue-property-decorator'
  import Vue from 'vue'
  import { Route } from 'vue-router'

  @Component({
    components: {}
  })
  export default class PageTransition extends Vue {
    NAME_FADE = 'fade'
    NAME_SLIDE_UP = 'slide-up'
    NAME_SLIDE_DOWN = 'slide-down'
    MODE_OUT_IN = ''
    MODE_IN_OUT = 'in-out'

    name = this.NAME_FADE
    mode = this.MODE_OUT_IN

    @Watch('$route', { immediate: true, deep: true })
    onRouteChanged(newVal: Route, oldVal: Route) {
      if (newVal.meta.transition === 'dialog') {
        this.name = this.NAME_SLIDE_UP
        this.mode = this.MODE_IN_OUT

      } else if (oldVal && oldVal.meta.transition === 'dialog') {
        this.name = this.NAME_SLIDE_DOWN
        // shift next page in immediately below dialog
        this.mode = this.MODE_IN_OUT

      } else {
        // default
        this.name = this.NAME_FADE
        this.mode = this.MODE_OUT_IN
      }
    }

  }
</script>

<style lang="scss" scoped>
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .fade-enter-active, .fade-leave-active {
    transition: all 0.1s ease;
  }


  // start of enter element
  .slide-up-enter {
    transform: translateY(60%);
    opacity: 0;
  }
  .slide-up-enter-active {
    transition: all 0.3s ease-out;
    z-index: 2100;
  }

  // start of leave element
  .slide-up-leave, .slide-up-leave-active {
    opacity: 0;
  }


  // start of leave element
  .slide-down-leave {
    z-index: 2100;
  }
  .slide-down-leave-to {
    transform: translateY(60%);
    opacity: 0;
    z-index: 2100;
  }
  .slide-down-leave-active {
    transition: all 0.3s ease-in;
  }

  // start of enter element
  .slide-down-enter {
    opacity: 0;
  }
  .slide-down-enter-active {
    /* show immediately behind existing page (lower z-index) */
    transition: all 0s;
  }
</style>

질문 1: CSS를 추가했습니까?이행 자체에서는 타이밍만 처리되므로 이행이 동작하려면 CSS를 추가해야 합니다(https://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components)).

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

질문 2: 고객님의 상황을 올바르게 이해했는지 모르겠습니다만, 이해했다면 네스트된 루트를 사용하여 다음 작업을 수행합니다.

레이아웃/NewRecord.표시하다

<template>
  <router-view name="dialog"></dialog>
</template> 

루트

const routes = {
  path: 'records/new',
  component: () => import('layouts/NewRecord.vue'),
  children: [
    {
      path: 'dialog',
      components: {
        dialog: () => import('src/pages/NewRecord.vue'),
      },
    },
  ],
}

저도 비슷한 일이 있어요.고정용기와 z-index shuffle을 사용하여 완성했습니다.스크롤 및 수직 얼라인먼트에 관한 많은 문제가 있었습니다만, 제 경우는 라우터 이행시에만 절대 위치를 사용하여 해결할 수 없었습니다.

다음은 데모입니다.https://kasheftin.github.io/vue-router-in-out-slide-scroll또한 페이지 스크롤 위치를 유지 및 복원하기 위해 local Storage를 사용해야 했습니다.

제 경우 페이지 내용은 세로로 정렬되어야 합니다.그래서 하나의 글로벌 스크롤 가능 컨테이너를 사용할 수 없었습니다(예:<body> 모드 한 후 첫 번째 in-out 모드를 콘텐츠를 추가하고 클래스를 추가한 후 첫 번째 아이를 삭제합니다., 에 두 있고,그중), 한 정렬이.

그래서 저는 모든 페이지를 스크롤 가능한 고정 용기로 포장했습니다. '우리'가 칩니다.List ★★★Item오른쪽에서 슬라이드하여 목록을 오버레이합니다.오른쪽에서 왼쪽으로의 애니메이션은 매우 간단합니다.

.slide-right-enter-active {
  transition: transform 1s ease;

.slide-right-enter {
  transform: translateX(100%);
}

왼쪽에서 오른쪽으로 애니메이션(오버레이가 사라짐)에 잘못된 z 인덱스가 있습니다.애니메이션 중에 DOM에는 다음이 있습니다.

<transition>
  <Item />
  <List />
</transition>

로는 " " 입니다.List 위에 표시됩니다.Item 해요 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . .을 사용하다

.slideable-page {
  position: fixed;
  overflow: auto;
  z-index: 2;
}

.slide-left-enter {
  z-index: 1;
}

.slide-left-enter-active {
  z-index: 1;
}

.slide-left-leave-active {
  transition: transform 1s ease;
  z-index: 3;
}

.slide-left-leave-to {
  transform: translateX(100%);
}

언급URL : https://stackoverflow.com/questions/58278430/vue-router-in-out-page-transition-transition-in-a-new-route-while-old-route-rem