vue页面路由配置和使用 vue添加路由和页面为什么不显示 _生活百科

前言项目框架：Vue3 + TypeScript
有这样一个需求，系统默认只有最基础的几个路由，如登录、404等，其它路由需要在登录后动态添加。系统没有固定首页，登录完成后跳转至动态菜单的第一个菜单页。
分析这一逻辑乍一看很简单，其实有很多小坑在里面。其中最容易踩的的坑是动态路由尚未渲染完成就已经触发路由跳转了，这时候肯定是404，因为路由并不存在；另一个容易踩的坑是路由重复加载，此时页面会显示空白，需要手动刷新才能正常显示。
首先想到的就是使用 Promise 函数解决，结果行不通。addRoute 是一个宏任务和 resolve 是微任务，所以 Promise 结束的时候并不能代表动态路由已经添加完成。
其次又想到使用 async 函数来确保获取到登录成功结果的时候，路由已经添加完成，结果一番尝试后依然行不通。因为添加路由的操作不是异步的，没有返回 Promise 对象，因此这里的 await 是不会产生效果的。（PS：事后使用 Promise.all 解决了这一问题，后面的具体方法上会说。）
最后，想到了一个很笨的解决方法，轮询。实验过后，确定可以实现，但就如开头说的，这会显得很 low ，虽然它最终解决了问题。
实践登录的操作都是一样的，所以单独拿出来只写一遍。表单就不做介绍了，就从点击登录表单校验通过后说起。
所有登录的代码放到一个页面会显得臃肿，所以具体登录的操作逻辑我把它抽离了出来。在 src/utils 目录下创建一个 auth.ts 文件。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：