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. paramsquery 的区别

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

✅ 3. routerroutes 的区别

概念 描述
router Vue Router 的实例对象,通过 createRouter() 创建
routes 配置数组,定义所有页面路径与组件的映射关系
js 复制代码
const routes = [ { path: '/home', component: Home } ];
const router = createRouter({
  history: createWebHistory(),
  routes,
});

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

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

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

💡 2)编程式导航(跳转)

js 复制代码
this.$router.push({ name: 'User', params: { id: 1 } });

💡 3)页面刷新跳转

js 复制代码
location.href = '/user/1'  // 页面会重新加载

💡 4)replace 不产生历史记录

js 复制代码
this.$router.replace({ path: '/login' });

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

📦 使用 defineAsyncComponent 懒加载:

js 复制代码
const User = defineAsyncComponent(() => import('@/views/User.vue'));

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

vue 复制代码
<keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-else />

路由中通过 meta 控制缓存:

js 复制代码
{
  path: '/dashboard',
  component: Dashboard,
  meta: { keepAlive: true }
}

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


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

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

📌 常见场景

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

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

js 复制代码
{
  path: '/admin',
  component: Admin,
  meta: {
    requiresAuth: true,
    role: 'admin',
    keepAlive: false
  }
}

实现方式:

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

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

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

✅ 路由懒加载

js 复制代码
component: () => import('@/views/About.vue')

✅ 分模块管理 routes

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

✅ 动态注册路由(适合 RBAC 权限系统)

js 复制代码
router.addRoute('admin', {
  path: '/admin/dashboard',
  component: Dashboard
});

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

vue 复制代码
<keep-alive :include="['UserPage', 'Dashboard']">
  <router-view />
</keep-alive>

✅ 总结:一句话回顾

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


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

相关推荐
zwjapple1 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止5 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall5 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴5 小时前
简单入门Python装饰器
前端·python