Vue-admin-template 报Uncaught (in promise) error问题及解决

问题描述：

在使用 Vue-admin-template 开发项目时，如果使用路由时出现了以下报错，可能会导致页面无法正常加载：

Uncaught (in promise) Error: Redirected when going from "/xxx" to "/xxx" via a navigation guard.

这个问题可能是由于路由中的钩子函数未正确配置导致的，这会导致路由循环重定向并使应用不稳定。

解决方案：

为了解决这个问题，我们需要更改路由钩子函数配置。以下是解决该问题的完整步骤：

步骤1：找到错误提示

当应用在浏览器中运行时，将在控制台中看到特定的错误消息。从中可以获取重定向的原始路由和重定向目标地址。

步骤2：访问路由文件并修复错误

为了在Vue-admin-template中找到路由文件，请将以下命令添加到命令提示符或终端窗口中：cd src/router。

现在，您需要查找下面的代码：

// beforeEnter: adminGuard,  // 管理员权限
beforeEnter(to, from, next) {
  next({ path: '/login' })
}

请注意，其中一条路由会在访问限制的时候触发并重定向到登录页面。而此时路由中的 beforeEnter 钩子函数中并未回调 next 方法，导致进入了死循环，最终导致页面无法加载。

修改该钩子函数，确保正常调用 next 方法：

// beforeEnter: adminGuard,  // 管理员权限
beforeEnter(to, from, next) {
  next('/login')
}

步骤3：重新加载应用

确保完成代码更改后，重新加载应用程序并尝试再次访问已配置的路由，确认问题是否已解决。

示例说明：

以下是一个关于路由循环重定向并导致页面无法正确加载的示例：

// beforeEnter: adminGuard,  // 管理员权限
beforeEnter(to, from, next) {
   next({ path: '/login' })
}

这个代码段中的 beforeEnter 钩子函数中未回调调用 next 方法会导致页面进入死循环，从而无法加载。

应该修改代码，确保调用 next 方法：

// beforeEnter: adminGuard,  // 管理员权限
beforeEnter(to, from, next) {
    next('/login')
}

请注意，这是一个简单的示例。在实际项目开发中，可能需要根据具体的错误消息和路由文件结构来查找问题并修复它。