时间戳

首页 > 解决方案 > VUE路由重定向未从其他页面关闭模式

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

问题描述

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

这个问题是有一个页面，当您第一次进入页面时（第一次）bootstrap modal会显示一个页面。我遇到的问题是，如果我第一次进入此页面然后更改 URL，“重定向”按预期工作，但模式仍在显示，我不知道如何关闭它。

路由.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 更改为“订单”并单击“输入” 在此处输入图像描述

定向到正确的页面（主页），但仍显示模式。有没有办法可以改变:keyusingroutes或者我必须使用类似的东西this.$forceUpdate()，尽管我已经读过这可能不起作用vue2并且真的是一件好事。

我最好的方法是什么？只是提到我是新手vue2

标签： vuejs2vuexvue-router

解决方案

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

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

就我而言，我想删除模态背景，但您可以修改它以满足您的需要。

推荐阅读