VUE路由重定向未从其他页面关闭模式答案

【问题标题】：VUE route redirect not closing modal from other pageVUE路由重定向未从其他页面关闭模式
【发布时间】：2020-04-05 23:43:55
【问题描述】：

我正在使用由另一个开发人员设置的 vue2 routes，但我正在尝试更改当前设置为转到“主页”页面的“重定向”。

这个问题是有一个页面，当你第一次进入页面时（第一次）显示bootstrapmodal。我遇到的问题是，如果我第一次进入此页面然后更改 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'}
];

如果我将“重定向：'/order'”更改为“重定向：'/'”，它会按预期进入我的主页，但会显示模式。有没有办法关闭重定向？

应该显示模态的页面

**将 URL 更改为“订单”并单击“输入”

指向正确的页面（主页），但仍显示模式。有没有办法我可以使用routes 更改:key，或者我必须使用this.$forceUpdate() 之类的东西，尽管我已经读到这可能不适用于vue2，这确实是一件好事。

我最好的方法是什么？顺便提一下我是vue2的新手

【问题讨论】：

模式很可能是在标记之外定义的，因此在您更改 url 时不会更新。这取决于它的显示方式...... vue 中是否有与模态的可见性相关联的数据属性？

标签： vuejs2 vuex vue-router

【解决方案1】：

可能不是解决问题的最干净或最好的方法，但我能想到的唯一方法是在我的“home.vue”文件中使用以下内容

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

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

使用了class，因此所有其他具有modals 的页面也将被它覆盖。

【讨论】：

【解决方案2】：

我用这种方法取得了成功。

您可以在 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()
})

在我的情况下，我想删除模态背景，但您可以修改它以满足您的需要。

【讨论】：

【解决方案3】：

我知道为时已晚，但您可以观察组件中的路线变化，因此当路线发生变化时，只需关闭模式

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

【讨论】：