Vue Router知识框架以及面试高频问题详解

Vue Router 知识体系 基础 路由配置 路由导航 路由组件 导航守卫 进阶功能 性能优化 常见问题 安装: createRouter 模式: history / hash RouterView / RouterLink URL 与路由的映射关系 静态路由 动态路由: params / query 嵌套路由 命名路由 / 命名视图 重定向 redirect 通配符路径 * 路由别名 alias 跳转 this.router.push / replace this.route 获取信息 带参数跳转: params / query 动态添加/删除路由：addRoute / removeRoute 懒加载组件 keep-alive 缓存 使用 props 传参 全局守卫: beforeEach/afterEach 路由独享守卫 组件内守卫: beforeRouteEnter 等 异步守卫 / next() 控制跳转 滚动行为 scrollBehavior 编程式导航失败处理 路由元信息 meta 权限控制 + 角色路由 自定义 history 实现 懒加载组件 路由按需加载 分模块路由 params 与 query 区别 刷新页面参数丢失 使用 name 导航失败 未匹配路由 fallback 处理

---

下面是 Vue Router 中前端面试高频考点精选 + 答案详解，包括概念理解、用法、实际场景、注意事项等，帮助你快速准备 Vue 面试相关内容：

---

✅ 1. history 模式与 hash 模式的区别

特性	hash 模式	history 模式
URL 表现形式	/about#section1	/about/section1
是否依赖 hash	是（# 后面不会被服务器解析）	否（使用 HTML5 History API）
是否支持 SEO	❌ 不友好	✅ 更利于 SEO
刷新后需配置服务	❌ 无需额外配置	✅ 需服务器支持 history fallback
原理	location.hash	pushState / replaceState

🔍 面试点：

• 若用 history 模式，服务端需配置所有路由都重定向到 index.html，否则刷新 404。
• hash 模式兼容性强，适合静态部署，如 GitHub Pages。

---

✅ 2. params 与 query 的区别

项目	params	query
是否写入路径	✅ 是 /user/:id	❌ 否 /user?id=123
声明方式	在 path 中使用 :变量	不需要声明
示例 URL	/user/123	/user?id=123
获取方式	this.$route.params.id	this.$route.query.id
是否可刷新保留	✅ 是	✅ 是
推荐场景	ID、详情页	搜索、分页、筛选等

---

✅ 3. router 与 routes 的区别

概念	描述
router	Vue Router 的实例对象，通过 createRouter() 创建
routes	配置数组，定义所有页面路径与组件的映射关系

const routes = [ { path: '/home', component: Home } ];
const router = createRouter({
  history: createWebHistory(),
  routes,
});

---

✅ 4. 路由导航的几种实现方式

💡 1）模板中使用 <router-link>

<router-link :to="{ name: 'User', params: { id: 1 } }">用户</router-link>

💡 2）编程式导航（跳转）

this.$router.push({ name: 'User', params: { id: 1 } });

💡 3）页面刷新跳转

location.href = '/user/1'  // 页面会重新加载

💡 4）replace 不产生历史记录

this.$router.replace({ path: '/login' });

---

✅ 5. 懒加载组件 + keep-alive 搭配动态组件缓存使用

📦 使用 defineAsyncComponent 懒加载：

const User = defineAsyncComponent(() => import('@/views/User.vue'));

📌 使用 <keep-alive> 缓存组件：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-else />

路由中通过 meta 控制缓存：

{
  path: '/dashboard',
  component: Dashboard,
  meta: { keepAlive: true }
}

🧠 适用于：表单保存状态、列表分页缓存等场景。

---

✅ 6. 前置全局路由守卫应用场景（beforeEach）

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

📌 常见场景：

• 登录校验
• 动态菜单生成
• 页面缓存控制（可结合 meta.keepAlive）
• 日志收集、埋点统计

---

✅ 7. 路由权限控制 & meta 元信息应用

{
  path: '/admin',
  component: Admin,
  meta: {
    requiresAuth: true,
    role: 'admin',
    keepAlive: false
  }
}

实现方式：

在全局守卫中根据 meta.role 与用户权限判断是否允许访问：

router.beforeEach((to, from, next) => {
  const role = getCurrentUserRole();
  if (to.meta.role && to.meta.role !== role) {
    next('/403'); // 无权限页面
  } else {
    next();
  }
});

---

✅ 8. 性能优化相关面试点

✅ 路由懒加载

component: () => import('@/views/About.vue')

✅ 分模块管理 routes

// routes/user.js
export default [{ path: '/user', component: User }];

✅ 动态注册路由（适合 RBAC 权限系统）

router.addRoute('admin', {
  path: '/admin/dashboard',
  component: Dashboard
});

✅ 缓存页面组件（keep-alive + include）

<keep-alive :include="['UserPage', 'Dashboard']">
  <router-view />
</keep-alive>

---

✅ 总结：一句话回顾

Vue Router 的核心考点在于配置、导航、守卫、懒加载、缓存、权限六大模块，围绕这些模块的用法和适用场景展开即可。

---

如果你需要我为这几个面试点生成一份PDF备考手册、思维导图或面试题答辩卡片，我可以帮你整理输出。是否需要？