Vue Router 4 導航故障

一、Vue Router 4 簡介

Vue Router 是一個官方的路由管理器，它和 Vue.js 的核心深度集成，可以非常方便地實現單頁面應用程序的導航管理。

二、Vue Router 4 導航守衛

1、beforeEach 導航守衛

在 Vue Router 4 中，可以通過添加 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 導航守衛來控制路由的導航。

其中，beforeEach 導航守衛在切換路由之前執行，常用於對用戶登錄狀態進行驗證。

const router = createRouter({
  routes,
});

router.beforeEach((to, from, next) => {
  const isLoggedIn = authService.isLoggedIn();
  if (!isLoggedIn && to.meta.requiresAuth) {
    next('/login');
  } else {
    next();
  }
});

該示例代碼中，beforeEach 導航守衛會在每個路由切換之前進行驗證，如果用戶未登錄，則會跳轉到登錄頁面。

2、beforeRouteEnter 導航守衛

beforeRouteEnter 導航守衛在組件渲染之前執行，可以用於獲取數據或執行其他初始化任務。

const router = createRouter({
  routes,
});

const someComponent = {
  data() {
    return {
      someData: null,
    };
  },
  beforeRouteEnter(to, from, next) {
    fetchDataFromServer().then((data) => {
      next((vm) => {
        vm.someData = data;
      });
    });
  },
};

router.addRoute({
  path: '/some-path',
  component: someComponent,
});

該示例代碼中，beforeRouteEnter 導航守衛會在 someComponent 組件渲染之前從服務器獲取數據，並將數據存儲在組件的 someData 屬性中。

3、beforeRouteUpdate 導航守衛

beforeRouteUpdate 導航守衛在組件已經渲染並且路由切換時執行。

const router = createRouter({
  routes,
});

const someComponent = {
  data() {
    return {
      someData: null,
    };
  },
  beforeRouteEnter(to, from, next) {
    fetchDataFromServer().then((data) => {
      next((vm) => {
        vm.someData = data;
      });
    });
  },
  beforeRouteUpdate(to, from, next) {
    fetchDataFromServer().then((data) => {
      this.someData = data;
      next();
    });
  },
};

router.addRoute({
  path: '/some-path',
  component: someComponent,
});

該示例代碼中，beforeRouteUpdate 導航守衛會在路由切換時從服務器獲取數據，並更新組件的 someData 屬性。

三、Vue Router 4 導航故障

1、參數格式錯誤

在 Vue Router 4 中，路由參數必須以對象的形式傳遞，例如：

// 正確方式
router.push({ name: 'todo', params: { id: 1 } });

// 錯誤方式
router.push('todo/1');

如果使用錯誤的參數格式進行路由導航，將會導致路由無法正確處理。

2、路由重複註冊

在 Vue Router 4 中，路由對象只能註冊一次，例如：

// 正確方式
const router = createRouter({
  routes: [
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ],
});

// 錯誤方式
const router = createRouter({
  routes: [
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ],
});

router.addRoute({
  path: '/about',
  component: About,
});

如果重複註冊路由對象，將會導致路由無法正確匹配。

3、異步組件加載失敗

在 Vue Router 4 中，可以使用異步組件來延遲加載組件，例如：

const router = createRouter({
  routes: [
    { path: '/about', component: () => import('./About.vue') },
    { path: '/contact', component: () => import('./Contact.vue') },
  ],
});

如果異步組件加載失敗，將會導致路由無法正確渲染。

四、解決導航故障的方法

1、檢查參數格式

在路由導航時，檢查參數是否以對象的形式傳遞。

// 正確方式
router.push({ name: 'todo', params: { id: 1 } });

// 錯誤方式
router.push('todo/1');

2、避免路由重複註冊

在註冊路由時，確保路由對象只被註冊一次。

// 正確方式
const router = createRouter({
  routes: [
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ],
});

// 錯誤方式
const router = createRouter({
  routes: [
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ],
});

router.addRoute({
  path: '/about',
  component: About,
});

3、處理異步組件加載失敗

在使用異步組件時，添加錯誤處理函數。

const router = createRouter({
  routes: [
    { path: '/about', component: () => import('./About.vue').catch(() => {}) },
    { path: '/contact', component: () => import('./Contact.vue').catch(() => {}) },
  ],
});

五、結論

Vue Router 4 是一個輕量、靈活、易用的路由管理器，但在使用過程中可能會遇到導航故障。可以通過檢查參數格式、避免路由重複註冊和處理異步組件加載失敗來解決這些問題。