Vue.js 路由导航失效急救手册：从点击无反应到 404 的全场景排查-优快云博客

本文链接：https://blog.youkuaiyun.com/yuanlong12178/article/details/149910481

在 Vue 项目里，路由突然“罢工”通常表现为：

点击 <router-link> 毫无反应，地址栏不变
手动刷新页面 404
路由跳转后空白，控制台没有报错
动态路由（如 /user/:id）刷新后参数丢失

本文把日常开发中高发的「路由导航失效」场景整理成「诊断 + 处方」形式，按顺序排查即可恢复导航。

一、先确认 3 个「生命体征」

检查项	正常表现
`router` 实例已注册	`main.js` / `main.ts` 里 `app.use(router)`
`<router-view>` 存在	页面有挂载点
路由模式匹配服务器	`history` 模式需服务器重定向，`hash` 模式无需

二、6 种高频故障与修复

1️⃣ 路由未注册：点击 `<router-link>` 无反应

症状
地址栏不变，控制台无报错。

原因
忘记 app.use(router)。

// main.ts
import { createApp } from 'vue'
import router from './router'
const app = createApp(App)
app.use(router) // ✅ 必须注册
app.mount('#app')

2️⃣ 路由重复挂载：导航守卫死循环

症状
无限 Redirect 或 Maximum call stack size exceeded。

原因
在全局守卫里 next('/login') 未加条件。

// ❌ 死循环
router.beforeEach((to, from, next) => {
  if (!isLogin) next('/login')
  next()
})

修复

router.beforeEach((to, from, next) => {
  if (!isLogin && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

3️⃣ 404 刷新：History 模式未配置服务器

症状
开发环境正常，生产环境刷新 404。

原因
history 模式需要服务器把任意路径回退到 index.html。

修复示例（Nginx）

location / {
  try_files $uri $uri/ /index.html;
}

临时方案：改成 hash 模式

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

4️⃣ 动态路由参数丢失：刷新后 `:id` 变 undefined

症状
/user/123 → 刷新 → this.$route.params.id 为 undefined。

原因
路由懒加载 + 动态导入时未正确传递参数。

修复
确保动态导入的组件正常接收 props: true：

{
  path: '/user/:id',
  name: 'User',
  component: () => import('@/views/User.vue'),
  props: true
}

并在组件中用 props: ['id'] 或 useRoute().params.id 取值。

5️⃣ 路由守卫异步逻辑未等待

症状
守卫里做 await 校验，但导航提前放行。

原因
忘记 next() 放在 await 之后。

修复

router.beforeEach(async (to, from, next) => {
  const hasAuth = await checkAuth()
  hasAuth ? next() : next('/login')
})

6️⃣ `<router-link>` 写法错误

症状
点击地址栏不变，控制台无报错。

原因
错误使用了字符串拼接或相对路径。

<!-- ❌ 错误示例 -->
<router-link to="'/user/' + userId">Profile</router-link>

<!-- ✅ 正确示例 -->
<router-link :to="{ name: 'User', params: { id: userId } }">
  Profile
</router-link>

三、一键排查脚本

在浏览器控制台执行以下代码，快速确认：

// 1. 路由实例是否存在
console.log(!!window.__VUE_ROUTER__)

// 2. 当前路由信息
console.log(router.currentRoute.value)

// 3. 已注册路由表
console.log(router.getRoutes())