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 是一个轻量、灵活、易用的路由管理器，但在使用过程中可能会遇到导航故障。可以通过检查参数格式、避免路由重复注册和处理异步组件加载失败来解决这些问题。