Vue-Router中路由更改后仍顯示以前的視圖

我有一個帶有

我不知道是什么原因造成的，也無法在 Google/StackOverflow 上找到太多資訊。這讓我覺得它來自我的實作，而不是來自 Vue-Router 的錯誤。

這是我的 router.js 的代碼：

import routes from './routes';

import store from '~/store';

// Function that takes the array of a user's rights and another array of the rights required to access a page
// Return true if the user has all rights required, false otherwise
let checker = (arr, target) => target.every(v => arr.includes(v));

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !getToken().accessToken) {
    return {
      path: '/login',
      // save the location we were at to come back later
      query: { redirect: to.fullPath },
    };
  } else if (to.meta.requiresRights && Array.isArray(to.meta.requiresRights)) {
    const userRights = store.state.auth.user.rights;
    const requiredRights = to.meta.requiresRights;

    return checker(userRights, requiredRights);
  } else {
    return true;
  }
});

這些是我的路線：

import SideNavigation from '~/components/layout/SideNavigation.vue';
import Footer from '~/components/layout/Footer.vue';
import Access from '~/views/Access.vue';
import Agents from '~/views/Agents.vue';
import Articles from '~/views/Articles.vue';
import ArticlesHistory from '~/views/ArticlesHistory.vue';
import EventsHistory from '~/views/EventsHistory.vue';
import Home from '~/views/Home.vue';
import Roles from '~/views/Roles.vue';
import Warehouse from '~/views/Warehouse.vue';
import WarehouseHistory from '~/views/WarehouseHistory.vue';
import Stocks from '~/views/Stocks.vue';
import TimeTable from '~/views/TimeTable.vue';
import Users from '~/views/Users.vue';
import Login from '~/views/Login.vue';
import Inventory from '~/views/Inventory.vue';
import NotFoundComponent from '~/views/NotFoundComponent.vue';

const routes = [
  {
    path: '/access/:id',
    name: 'access',
    components: {
      default: Access,
      SideNavigation,
      Footer,
    },
    meta: {
      requiresAuth: true,
      requiresRights: ['manage_agents_gestion'],
    },
  },
  {
    path: '/agents',
    name: 'agents',
    components: {
      default: Agents,
      SideNavigation,
      Footer,
    },
    meta: {
      requiresAuth: true,
      requiresRights: ['manage_agents_gestion'],
    },
  },
  {
    path: '/articles',
    name: 'articles',
    components: {
      default: Articles,
      SideNavigation,
      Footer,
    },
    meta: {
      requiresAuth: true,
      requiresRights: ['manage_articles_gestion'],
    },
  },
  {
    path: '/articles-historique',
    name: 'articlesHistorique',
    components: {
      default: ArticlesHistory,
      SideNavigation,
      Footer,
    },
    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/evenements-historique',
    name: 'evenements',
    components: {
      default: EventsHistory,
      SideNavigation,
      Footer,
    },
    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/',
    name: 'home',
    components: {
      default: Home,
      SideNavigation,
      Footer,
    },
    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/login',
    name: 'login',
    components: {
      default: Login,
    },
  },
  {
    path: '/roles/agents',
    name: 'rolesAgents',
    components: {
      default: Roles,
      SideNavigation,
      Footer,
    },
    props: {
      default: {
        roleType: 1,
      },
    },
    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/roles/users',
    name: 'rolesUsers',
    components: {
      default: Roles,
      SideNavigation,
      Footer,
    },
    props: {
      default: {
        roleType: 0,
      },
    },
    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/warehouse/:id',
    name: 'warehouse',
    components: {
      default: Warehouse,
      SideNavigation,
      Footer,
    },

    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/warehouse/:id/stock',
    name: 'warehouseStock',
    components: {
      default: Stocks,
      SideNavigation,
      Footer,
    },

    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/warehouse/:id/history',
    name: 'warehouseHistory',
    components: {
      default: WarehouseHistory,
      SideNavigation,
      Footer,
    },

    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/warehouse/:id/invent-historique',
    name: 'inventaires',
    components: {
      default: Inventory,
      SideNavigation,
      Footer,
    },
  },
  {
    path: '/timetable',
    name: 'timetable',
    components: {
      default: TimeTable,
      SideNavigation,
      Footer,
    },
    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/users',
    name: 'users',
    components: {
      default: Users,
      SideNavigation,
      Footer,
    },
    meta: {
      requiresAuth: true,
      requiresRights: ['manage_users_gestion'],
    },
  },

  // 404
  { path: '/:pathMatch(.*)', component: NotFoundComponent },
];

export default routes;

這是路由器視圖：

 <div class="side-nav-container">
      <div class="side-nav">
        <router-view
          name="SideNavigation"
          link-active-class="is-active"
        />
      </div>
    </div>
    <div
      class="container flex flex-column"
      style="width: 100%"
    >
      <div class="flex-grow-1">
        <router-view v-slot="{ Component }">
          <transition name="el-fade-in-linear">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>

      <div class="footer-container">
        <Footer />
      </div>
    </div>

uj5u.com熱心網友回復：

這個問題的原因是 Vue 默認使用in-out模式進行轉換。如果你改變模式，out-in它應該是固定的。

<transition name="el-fade-in-linear" mode="out-in">
  <component :is="Component" />
</transition>

如檔案中所述：

• in-out：新元素先過渡進來，完成后，當前元素過渡出去。
• out-in：當前元素先轉出，完成后，新元素轉入。

標籤：

上一篇：如何在Routeapi上轉儲不起作用Laravel

下一篇：用于更改背景顏色的深度選擇器