IT이야기

Vue.js 경로 변경 모달 열기

cyworld 2022. 4. 1. 21:15
반응형

Vue.js 경로 변경 모달 열기

현재 나의vue-router구성은 다음과 같다.

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/settings',
      name: 'settings',
      component: Settings,
    }
  ],
});

이제, 나는 새로운 길을 정의하고 싶다./some-modal-path모달이라고 하는 모달로 항해할 때ModalComponent는 현재 구성 요소 위에 오버레이로 열린다.

이 일을 할 수 있을까?vue-router만약 그렇다면, 어떻게 할 수 있을까?

빠른 솔루션

놓다<router-view>각 구성 요소별로

export default new Router({
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home,
          children: [
            {   path: '/some-modal-path',
                component: ModalComponent,
                name: 'ModalComponent'
            }
          ]
        },
        {
          path: '/settings',
          name: 'settings',
          component: Settings,
          children: [
            {   path: '/some-modal-path',
                component: ModalComponent,
                name: 'ModalComponent'
            }
          ]
        }
      ],
    });

참조URL: https://stackoverflow.com/questions/49505691/open-a-modal-on-vue-js-route-change

반응형