vue 라우터를 사용하여 모델 제어

vue 라우터를 사용하여 모델 제어

저는 Vue Router와 함께 Vue 2에서 개발한 프로젝트에서 일하고 있으며, Vue Router가 제어하는 모듈로 작업하려고 합니다.

다음 코드를 실행했습니다.

메인 vue 컴포넌트: 통상적인 컴포넌트가 디폴트 라우터 뷰에 로드되고 모든 모달은 모드 라우터 뷰에 로드됩니다.

<div id="app">
  <router-view v-if="!isLoading"></router-view>
  <router-view v-if="!isLoading" name="modal"></router-view>
</div>

Route Enter 메서드에서 볼 수 있듯이 이전 "from" 루트가 있는지 확인하고 있습니다(즉, 사용자가 앱 내부를 탐색하는 페이지를 얻었음을 의미합니다).디폴트 컴포넌트로 설정하면...그렇지 않은 경우(즉, 사용자가 URL에서 직접 얻은 경우) 대시보드를 기본값으로 설정하면 대시보드가 모달 뒤에서 열립니다.

import Dashboard from 'modules/dashboard/components/Main.vue'
import { isNil } from 'lodash'

export default {
  data() {
      return {
        canAccessDirect: true,
        goBackTo: '/'
      }
    },
    beforeRouteEnter(to, from, next) {
      to.matched[0].components.default = isNil(from.matched[0]) ? Dashboard : from.matched[0].components.default

      next(vm => {
        if (!vm.canAccessDirect)
          vm.$router.push({
            name: 'dashboard.index'
          })

        vm.fetchRecords()
        vm.goBackTo = from.path
        window.jQuery(vm.$el).modal('show')
        window.jQuery(vm.$el).on('hide.bs.modal', () => {
          vm.$router.push(vm.goBackTo)
        })
      })
    },
    beforeRouteLeave(to, from, next) {
      setTimeout(() => {
        next()
      }, 200)
    },
    methods: {
      fetchRecords() {
        // Do list request
      }
    }
}

라우터 객체의 예를 다음에 나타냅니다.첫 번째 루트는 라우터 뷰모달에서 모달, 두 번째 루트는 디폴트라우터 뷰에서만 열립니다.

{
  name: 'leads.quick-add',
  path: '/leads/quick-add',
  components: { modal: QuickAdd },
}, 
{
  name: 'leads.index',
  path: '/leads',
  component: Main,
},

잘 작동한다!이 문제는 모달 URL에 접속했을 때(직접 접속이든 네비게이션이든 상관 없음) 기본 컴포넌트에 하위 컴포넌트가 있을 때 발생합니다.그 사건에서 자 부품은 빠져나와!

무슨 일이 일어나는지 알 수 있도록 스크린샷을 첨부합니다.

이미지 1

이미지 2

이미지 1에서는 2개의 컴포넌트를 사용할 수 있습니다.VueRouter에서는 1이 기본 컴포넌트이고 2가 그 아이입니다.

이미지 2에서 + Quotation 버튼을 클릭하면 모달과 컴포넌트 번호2가 로딩됩니다!

다른 컴포넌트를 보관하는 방법에 대한 아이디어는 없습니까?

확실히 하기 위해서, 수동으로 모드를 호출하지 않고, 루팅을 하고 싶다고 생각하고 있습니다.

################ 편집 Router 이전 체크인이 아닌 이와 같은 작업을 수행하려고 합니다.Enter 메서드:

{
  name: 'leads.show.quotations.create',
  path: '/leads/:id/quotations/create',
  components: {
    default: Show,
    'default.tab': Quotations,
    modal: Add
  },
  meta: {
    requiresAuth: true
  }
},

하위 라우터 보기가 있지만 작동하지 않는 경우!

가능성을 고려하여 이 문제를 github repo에 추가했습니다.https://github.com/vuejs/vue-router/issues/1030

회사에서 한 프로젝트에서 이 일을 했습니다.실제로는 매우 간단합니다.어려운 부분은 거기에 있는 jquery와 css를 혼합하여 모달의 위치를 지정하는 것입니다.모달의 시작점은 컴포넌트 내부의 라우터 뷰이기 때문에 package portal-vue를 사용하여 모달의 콘텐츠를 본문의 끝으로 이동하는 것을 권장합니다.

다음은 작업 예시입니다.https://codesandbox.io/s/vue-router-modal-j10t2

먼저 소품으로 아이를 받는 Modal Component를 만듭니다.

<template>
  <portal to="modal">
    <div class="modal-wrapper">
      <div class="overlay" @click="$router.back()"></div>
      <div class="modal">
        <!-- you can use v-bind to pass down all props -->
        <component :is="component" v-bind="$attrs"/>
      </div>
    </div>
  </portal>
</template>

<script>
export default {
  name: "Modal",
  props: ["component"],
};
</script>

<style scoped>
.modal-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.modal {
  position: absolute;
  z-index: 1;
  margin: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 5em;
  border: 1px solid #ccc;
  border-radius: 1em;
  box-shadow: 0 0 1em #00000033;
}

.overlay {
  z-index: 1;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: #00000055;
}
</style>

다음으로 루트의 소품을 사용하여 특정 루트에 콘텐츠를 할당할 수 있습니다.

import Home from "./Home.vue";
import Modal from "./Modal.vue";
import Content from "./Content.vue";

const router = new VueRouter({
  routes: [
    {
      path: "/",
      component: Home,
      children: [
        {
          path: "create",
          component: Modal,
          props: {
            component: Content
          }
        }
      ]
    }
  ]
});

모달은 //의 자루트이므로 Home 컴포넌트는 라우터 뷰를 렌더링해야 합니다.

<template>
  <div>
    Hi i'am home
    <router-view />
    <router-link to="/create">open modal</router-link>
  </div>
</template>

또한 App.vue는 포털 타깃을 렌더링해야 하므로 모달은 콘텐츠의 끝으로 이동합니다(모달의 위치를 훨씬 쉽게 지정할 수 있습니다).

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" width="25%" />
    <router-view />
    <portal-target name="modal" />
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

그리고 이것이 마지막입니다.

언급URL : https://stackoverflow.com/questions/41249767/control-modals-using-vue-router