背景介绍

先描述一下需求，要在一个老项目里根据type类型，给一个试题题干组件新增一个class样式，type是在url地址栏上面携带的。简单，一行代码搞定，五分钟部署，十分钟留给测试，然后跟车上线，打卡下班！

《凉凉》送给自己

看标题就知道结果了，第二天下午现网问题来了，一线反馈某个页面题干不展示了，值班同事排查一圈，找到我说我昨天加的代码报错了！

惊了，就加了一行业务代码，其他都是样式，测试也通过了，这也能有问题？绩效C打底稳了（为方便写文章，实际判断用变量代替）：

<div :class="{'addClass': $route.query.type === 'xx'}">
   ...
</div>

问题其实很简单，$route为undefined了，导致query获取有问题，这让我点怀疑自己，难道这写错了？管不了太多，只能先兼容上线了。

$route && $route.query && $route.query.type

其实是可以用?.简写的，但是这个项目实在不“感动”了，保险写法，解决问题优先。提申请，拉评审，走流程，上线，问题解决，松口气，C是保住了。

问题分析

解决完问题，还要写线上问题分析报告，那只能来扒一扒代码来看看了。首先，这个项目使用的是多页应用，每个页面都是一个新的SPA，我改的页面先叫组件A吧，组件A在页面A里被使用，没问题；组件A同样被页面B使用，报错了。那接下来简单了，看代码：

// 2022-09-26 新增
import App from '@/components/pages/页面A'
import router from '@/config/router.js'
// initApp 为封装的 new Vue
import { initApp, Vue } from '../base-import'
initApp(App, router)

// 2020-10-18 新增
import App from '@/components/pages/页面b'
new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
})

两个页面的index.js文件，两种写法，一个引用了router，一个没有引用，被这个神仙代码整懵了。然后再看了一下其他页面，也都是两种写法掺着写的，心态崩了。这分析报告只能含着泪写了...

最后总结

1. 问题不是关键，关键的是代码规范；
2. 修改新项目之前，最好看一下代码逻辑，有熟悉的同事最好，可以沟通了解一下业务（可以避免部分问题）；
3. 当想优化之前代码的时候，要全面评估，统一优化，上面的写法我也找同事了解了，因为之前写法不满足当时的需求，他就封装了新方法，但是老的没有修改，所以就留了坑；