vue面试题-路由守卫 / 导航守卫

说到权限 那么肯定是根据不同账户得到不同的权限来做路由配置和菜单的渲染 第一点当我们登录之后会获取到当前账户的身份（权限），那么我们的路由配置实际上就是一个数组 我们要做的事情就是把获取到的身份与这个数组做对比，通过相关的计算筛选出最终匹配当前身份的路由配置 然后将计算出来的路由数组通过router.addRouters动态挂载 还要注意的一点就是需要将我们筛选出来的路由配置渲染到我们的前端页面上去一一相对应 Vue.js 是一款流行的前端框架，其在实际项目中常常涉及到路由管理和权限控制。在面试中，面试官可能会提出关于“路由守卫”或“导航守卫”的问题，这是Vue Router的一个重要特性，用来控制用户的导航行为，确保只有授权的用户才能访问特定的页面。 1. **路由守卫 / 导航守卫**： - 路由守卫分为全局守卫、路由独享守卫和组件内守卫，它们提供了在导航发生之前或之后执行逻辑的机会。 - `beforeEach` 是全局前置守卫，它有三个参数：`to`、`from` 和 `next`。`to` 表示即将进入的目标路由，`from` 表示当前导航正要离开的路由，`next` 是一个必须调用的函数，决定是否放行。通常，我们会检查`localStorage`或`sessionStorage`中的`token`来判断用户是否已登录，如果已登录则调用`next()`放行，否则重定向至登录页面。 2. **权限路由 / 动态路由 / 鉴权**： - 在用户登录并获取到权限信息后，我们可以根据权限动态生成路由表。例如，将用户角色与预定义的路由权限列表进行匹配，筛选出用户可访问的路由，并使用`router.addRouters`动态添加到路由列表中。 - 为了让前端页面与动态路由对应，我们需要确保在渲染时使用这些动态生成的路由，这可能涉及到菜单和组件的动态加载。 3. **拦截器**： - Axios 是 Vue.js 常用的 HTTP 库，可以设置请求拦截器和响应拦截器。 - **请求拦截**：通常用于在每个请求发送前添加`token`到请求头，确保每个请求都有认证信息。 - **响应拦截**：可以统一处理所有响应，比如处理错误信息，或者在`token`失效时自动重定向到登录页面。 4. **CRUD（增删改查）操作**： - **创建（Create）**：前端获取新增数据，通过API发送POST请求，服务器接收到数据后保存到数据库，并返回最新数据。 - **删除（Delete）**：通过指定ID或code发送DELETE请求，服务器删除对应数据，返回更新后的数据。 - **更新（Update）**：先获取要修改的数据ID，更新数据后通过PUT或PATCH请求发送，服务器更新数据库并返回最新数据。 - **查询（Query）**：无参数时获取所有数据，有参数时通过关键词发送GET请求，服务器返回匹配的数据。 5. **Vue.js 常用指令**： - `v-for`：用于遍历数组或对象并渲染列表。 - `v-bind`(`:`)：绑定属性值。 - `v-if` / `v-show`：条件渲染，`v-if`更适合不频繁切换的场景，`v-show`适用于频繁切换。 - `v-else-if` / `v-else`：提供条件分支。 - `v-model`：双向数据绑定。 - `v-on(@)`：绑定事件监听器。 - `v-text`：设置元素的文本内容。 - `v-html`：设置元素的HTML内容。 - `v-once`：只渲染元素和组件一次。 - `v-prev`：用于v-for中保留当前循环变量的上一个值。 - `v-cloak`：CSS类，防止在Vue实例渲染完成前显示未编译的Mustache语法。 6. **computed 和 watch**： - `computed` 是计算属性，基于依赖缓存结果，适合只读且结果可缓存的场景。 - `watch` 是观察者，用于监听数据变化并执行回调，更适用于需要执行复杂操作或响应数据变化的情况。 7. **数组常用方法**： - `pop` / `push`：操作数组末尾元素。 - `shift` / `unshift`：操作数组开头元素。 - `reverse`：反转数组。 - `sort`：排序数组。 - `splice`：插入、删除或替换数组元素。 - `find` / `findIndex`：查找满足条件的第一个元素及其索引。 - `indexOf`：查找元素索引。 - `every` / `some`：检查所有元素是否满足条件。 - `forEach`：遍历数组并执行函数。 - `map`：创建新数组，每个元素为原数组元素调用函数的结果。 - `includes`：检查数组是否包含指定元素。 以上知识点涵盖了Vue.js在实际项目中的一些核心概念和常见操作，对于理解和解答面试问题非常有帮助。在移动端项目和小程序功能点的考察中，可能还会涉及组件化开发、状态管理、网络请求优化、性能优化等方面的问题。