Vue路由封装高频面试题及详细答案（实战向）.docxVIP

Vue路由封装高频面试题及详细答案（实战向）

一、基础认知类（入门必问）

1、项目中为什么要对Vue路由进行二次封装，不直接用原生vue-router行不行？

参考答案：

可以直接用，但项目做大了一定会乱。原生vue-router只能实现最基础的跳转、匹配功能，完全裸写会有很多问题，所以必须二次封装。

封装的核心目的就4点：

统一管理：所有路由规则、页面路径、权限、菜单、标题统一放在路由文件里，不用散落在页面代码中，后期维护改一处就行。

统一拦截：全局前置守卫、后置守卫统一封装，统一处理登录校验、权限判断、页面标题、loading、跳转拦截。

规范路由结构：统一配置meta、name、path、组件引入方式，避免多人开发写法混乱。

支持动态路由：原生写法很难做权限路由拆分，封装后可以实现后端返回权限、动态挂载路由。

2、你项目中路由的目录结构是怎么设计的？

参考答案：

我项目里不会把所有路由写在一个index.js里，会做拆分，结构如下：

router/index.js：路由入口，创建路由实例、统一守卫、导出路由

router/static.js：静态路由，所有人都能访问，比如登录、404、首页

router/async.js：动态权限路由，根据角色权限动态挂载

router/guard.js：单独抽离路由守卫，拆分前置、后置守卫，代码更清晰

好处很明显：静态、动态路由