VUE 경로 리디렉션이 다른 페이지에서 모달을 닫지 않음

VUE 경로 리디렉션이 다른 페이지에서 모달을 닫지 않음

사용 중vue2 routes다른 개발자가 설정했지만 현재 설정된 'redirect'를 'home' 페이지로 이동하도록 변경하려고 합니다.

이 문제는 페이지를 처음으로 입력할 때 페이지가 있다는 것입니다.bootstrap modal가 표시됩니다.문제는 제가 처음 이 페이지에 들어가서 URL을 변경하면 '리다이렉트'가 예상대로 작동하지만 모달도 계속 표시되고 있어서 어떻게 접근해야 할지 모르겠습니다.

routes.js

import {store} from './store/store';
import Cart from './components/Cart';
import Stock from './components/Stock';
import Home from './components/Home.vue';
import Review from './components/Review';
import Order from './components/Order.vue';
import OrderReport from './components/OrderReport';
import AccountDetails from './components/AccountDetails';
import ExistingOrders from './components/ExistingOrders';

export const routes = [
    {path: '', component: Home},
    {path: '/order', component: Order},
    {
        path: '/review', component: Review, children: [
            {path: '', component: ExistingOrders},
            {
                path: ':id', component: OrderReport, beforeEnter: (to, from, next) => {

                    let orderCount = store.getters.orderPaginator.items.filter(item => item.id === +to.params.id).length;

                    next(orderCount > 0);
                }
            }
        ]
    },
    {path: '/account', component: AccountDetails},
    {path: '/stock', component: Stock},
    {path: '/cart', component: Cart},
    {path: '*', redirect: '/order'}
];

"redirect: '/order'를 "redirect: '/'"로 변경하면 예상대로 홈 페이지로 이동하지만 모달이 표시됩니다.리다이렉트로 닫을 수 있는 방법이 있습니까?

모달을 표시해야 하는 페이지

**URL을 'orders'로 변경하고 'Enter'를 클릭합니다.

올바른 페이지(홈 페이지)로 이동했지만 모달은 여전히 표시됩니다.제가 그것을 바꿀 수 있는 방법이 있나요?:key사용.routes아니면 제가 비슷한 것을 사용해야 할까요?this.$forceUpdate()비록 이것이 안 될 수도 있다는 것을 읽었지만.vue2그리고 정말 좋은 일입니다.

저의 최선의 방법은 무엇입니까?말이 나온 김에 처음입니다.vue2

저는 이 접근법으로 성공했습니다.

Vue Router에서 Global Before Guards라는 기능을 사용할 수 있습니다.

안에서.router폴더index.js파일:

const router = createRouter({
  // not relevant to the answer
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  // remove modal backdrop if one exists
  let modalBackground = document.querySelector('.modal-backdrop')
  if (modalBackground) {
    modalBackground.remove()
  }
  // do other stuff

  next()
})

저의 경우 모달 배경을 제거하고 싶었으나 필요에 따라 수정할 수 있습니다.

아마도 이 문제를 해결하는 가장 깨끗한 방법은 아닐 것입니다. 하지만 제가 생각할 수 있는 유일한 방법은 집에서 다음과 같은 것들을 사용하는 것이었습니다.vue' 파일

mounted() {
    this.closeAccountSelectModal();
},

methods: {
    closeAccountSelectModal() {
        $('.modal ').modal('hide');
    }
}

사용됨class그래서 있는 다른 모든 페이지들.modals또한 그것에 의해 커버될 것입니다.

너무 늦은 것은 알지만 구성 요소의 경로 변경을 볼 수 있으므로 경로가 변경되면 모달을 닫습니다.

 watch:{
        $route (to, from){
    
            // hide modal
        }
    }

언급URL : https://stackoverflow.com/questions/59307025/vue-route-redirect-not-closing-modal-from-other-page