场景题汇总

1. axios 拦截器使用场景：

   1. 请求拦截器： 在每一个请求路径中都需要添加“http:localhost:8080/”，我们可以在设置axios 的默认请求路径。
   2. 请求拦截器： 在访问需要认证身份的后端接口时需要在请求头中添加 token，我们可以在 axios 的前置拦截去统一处理。
   3. 响应拦截器： 如果登录失败，我们是需要弹窗显示错误的，比如验证码错误，用户名或密码不正确等。不仅仅是这个登录接口，所有的接口调用都会有这个情况，所以我们可以做个 axios 的后置拦截，对返回的结果进行分析，如果是异常就直接弹窗显示错误，这样我们就省得每个接口都写一遍了。

   这里说一下 token，一般是在登录完成之后，将用户的 token 通过 localStorage 或者 cookie 存在本地，然后用户每次在进入页面的时候，会首先从本地存储中读取 token，如果 token 存在说明用户已经登陆过，则更新 vuex 中的 token 状态。然后，在每次请求接口的时候，都会在请求的 header 中携带 token，服务器就可以根据你携带的 token 来判断你的登录是否过期，如果没有携带，则说明没有登录过。

2. 使用 axios 拦截器的方法：

   1. 在 src 目录下创建 axios.js 文件。
   2. 在 main.js 中删除原来导入的import axios from 'axios'，因为在 axios 中已经引入。

   import axios from './axios'
   Vue.prototype.$axios = axios // 全局使用axios库
   

3. 解决 Vue 项目中使用 better-scroll 在下拉加载页面后出现滑动卡顿的问题。

   场景：在 vue 项目中使用 better-scroll 解决原生滑动不够顺滑的问题，但在下拉加载更多数据时，出现无法下拉，滑动卡顿，但是稍微等一会，就又可以正常下拉滑动。

   原因分析：

   出现该现象的原因是由于 better-scroll 中的一个属性：scrollerHeight。

   1. better-scroll 在决定有多少区域可以滚动时，是根据 scrollerHeight 属性决定的。
   2. scrollerHeight 属性是根据放在 better-scroll 中子组件的高度决定的。
   3. 但在刚下拉加载时，由于图片加载速度较慢，所以 scrollerHeight 计算的结果是少于实际高度的，就会导致拉到一定高度无法下拉的情况。但是等待一会，图片加载完毕，scrollerHeight 变成实际高度，就又可以正常滚动。

   解决方案：

   解决方法就是监听每一张图片的加载。然后在每张图片加载完成手动刷新 scrollerHeight 的数值。

   • vue中使用 @load=“方法” 实现对图片监听。
   • 再调用 better-scroll 中的 refresh()。

   博客地址

4. 小程序单页面跳转最大的层数,达到后怎么处理的?

   最大页面10个，到达10层了只能由 redirectTo不保存当前页跳转。

5. Vue-router 跳转刷新页面 Params 参数丢失问题

   vue-router的跳转传参方式分为 query 和 params俩种。

   1. query传参数，相当于拼接在 url 后面，这种方式不会丢失参数，但是数据量大的话（比如传递对象），url 就会变得太长而且不隐密。