vue项目如何快速定位是哪个地方发起了路由跳转

就这？

这里当然不是指那种简单情况（如：直接在某个明确的点击事件中调用this.$router.push(...)）, 而是复杂情况， 可能跳转是写在了某个watch里面，或computed，或created里面，不要吐槽路由为什么会写在这些地方，实际情况就是会存在这种情况，针对这些情况，我希望能找到一种快速定位代码的方法

快速定位

工具

火狐浏览器

方式

vue能通过三种方式改变路由

• $router.push(...)
• $router.replace(...)
• 自定义路由守卫回调函数

那么就分别在push方法内部,replace方法内部,以及自定义路由守卫回调函数都加上断点。如下图

从截图的locatoin值可以直到，当前会跳转到/home的路由地址， 再看调用堆栈push, 表示当断点所在函数为push, 再下一个handler就是调用push方法的地方， 此时再点击handler, 此时我们就找发起路由跳转的实际代码所在，效果如下图

补充说明

FireFox可以归可以,但是使用Firefox比较卡和慢, 其实Chrome也可以,不过要先将vue项目的devtool值设置为source-map, 不然Chrome开发工具的代码定位可能不准确

附上vue.config.js中修改devtool值的方法

配置方式一:

// vue.config.js
module.exports = {
    ... 省略一些配置
    configureWebpack:{
      devtool:'source-map'
    },
    ... 省略一些配置
}

配置方式二:

// vue.config.js
module.exports = {
    ... 省略一些配置
    configureWebpack: (config) => {
      //调试JS
      config.devtool = "source-map"
    },
    ... 省略一些配置
}