问题描述

项目常规进入无异常, 但是清空浏览器缓存后，无法获取到$route的信息，this.$route的代码在watch侦听器中调用，且立即调用(代码在根页面组件)

解决思路

由于是浏览器清空缓存才触发的bug， 在代码处打上断点，查看当前的$route信息，得到$route为默认的根路由信息，而不是url的哈希映射的组件信息。

    "name": null,
    "meta": {},
    "path": "/",
    "hash": "",
    "query": {},
    "params": {},
    "fullPath": "/",
    "matched": []
}

结果

项目中的路由使用了懒加载的形式， 所以当watch函数触发的时候由于路由组件异步加载还未更新到$route的信息，此时路由导航还在异步队列，路由信息还未更新。

const AllPage =  () => import('@/view/AllPage/AllPage.vue');// 全部

1. 异步延时setTimeout
2. 使用location对象获取hash信息
3. 使用同步路由组件