草庐IT

真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路,切实可行!

高桥Machiko 2023-07-12 原文

PS:想直接看解决方法的可以跳过前面的废话阶段从后往前看~

前情回顾:萌新最近从Vue2转战Vue3,一边自学一遍自己做点娱乐项目练练手,这次Vue3项目权限管理用到动态路由,由于以前一直用的addRoutes()方法已经被废弃,只能学着官网用addRoute()搭配forEach()来使用,一开始什么问题都没有,也实现了根据用户角色来获取相对应的路由,实现了权限管理。

但是!一刷新问题就来了,页面直接一片空白,控制台用金色传说vue-router.mjs?f169:35 [Vue Router warn]: No match found for location with path "/uma/admin" 对我疯狂输出。

这对我一个好几年CV经验的老油条来说简直是司空见惯,不就是报个警告吗?不是红码我不看,直接将警告信息CV下来百度一下,果不其然解决方法大大的有。熟练地点开十几个链接,一看什么花里胡哨方法都有,下面我就来列举几个最有代表性的:

1、

Excuse me?报错报的是匹配不到指定的路由,你把通配路由中不存在的地址统一重定向到404这条给注释掉确实就不去404页了,真是个小机灵鬼。

2、网上最多的解决方案:next({ …to, replace: true }),说实话第一眼就觉得不靠谱,试了一下直接死循环,好不容易把判断条件设置好了不死循环了,还是跟以前一模一样,该白屏还是白屏。我来说一下为什么不靠谱,控制台输出一下to就知道,match那一栏就是空的,这么多人写的解决方案都是判断match为空就next(to.path)要么next({ …to, replace: true }),这不是来搞笑的吗?

之所以页面空白,就是因为要to的路由匹配不到,你现在next(to.path)给他强行再进一次路由守卫,想next到to的地址去???这不死循环浏览器都看不下去。

3、将路由信息存到session里。且不说安全性如何,这种方法根本就解决不了问题,现在是匹配不到路由本身,session存了路由地址有什么用?这就像给你个房子的地址,你过去一看房子还没建呢,住哪?问题的根源根本就不是找不到路由地址,to里面的path就是我们要的路由地址,问题是动态路由根本没挂载完成,光知道个地址一点用都没有。

看了一整天,网上没几个方法是靠谱的,大多数是复制粘贴,要么就是有的人分析了上千字结论是自己打错了字,这种文章简直就是浪费大家的时间。

好了,进入正题,请看下图:

从这我们可以明显看出,在控制台报错的时候,根本就没进入路由守卫,所以在路由守卫里配置任何内容或者重新将动态路由添加到session或者vuex里的方法都是没用的,因为人家压根就没来得及进路由守卫就中道崩殂了。

那么我们的思路就很清晰了,要解决路由匹配不到的问题,首先我们应该拿到动态路由,但是以往在路由守卫里进行的动态路由初始化现在行不通,因为在进路由守卫之前,程序已经进行了路由匹配,结果就是没匹配到任何内容,自然就报错了。

我们不妨在脑海里将程序的执行过程过一遍,在关键节点充分使用控制台输出一些内容,方便我们判断,下图是我自己的控制台输出:

为了准确判断问题出在哪,我在很多地方都设置了控制台输出,上图是已经解决问题后的控制台截图,可以看出在报错之前确实将数据写入了vuex,问题总算是解决了。

注意!这图里的报错是因为我故意将数据库中对应的路由删了,为了演示效果而已。

其实具体的解决方法很简单,我将其分为两步:

首先,在Main.ts(在router里面写也行,都一样)里的路由守卫外先执行一遍路由初始化,注意判断token是否存在,不然没登录的用户一样获得了动态路由,权限管理就失效了。

可以看到我这段程序使用了ES7语法糖await,注意!这里必须使用await,如果你使用了我最爱的.then语法,那么很抱歉,你的页面刷新之后肯定还是空白一片。Why?还是用控制台输出来判断,我这里没截图,直接上结论,如果用了.then,你会惊奇的发现,确实进入了initMenu函数中,但是!也就仅仅是进去了,initMenu函数还没执行完,就直接进入路由守卫,接着输出了下一行的“初始化完成”。我们都知道,报错是发生在进入路由守卫之前的,因此即便我们在路由守卫之前进行了路由初始化,我们的程序依然是在初始化完成之前进入了路由守卫中去,所以还是错。我们只能想办法将异步函数同步化,这样才能保证函数执行的顺序。

其次,路由挂载到app上的时机也很重要,上面的内容可以证明,如果初始化还没完成,就已经挂载上了app,那么必然是匹配不到路由报错的,

因此我们还得使用await,强行让挂载等待我们的路由初始化完成,彻底将刷新就空白页的问题解决。

解决完之后回想起来真的挺简单的,但就是这么简单的问题,网上冲浪一整天,折腾到头都快秃了也没能解决,最终只能自己跟着程序走一遍下来,将思路理清,对症下药,也算是顺利将这个bug解决掉了。

网上看挺多人都在问这个问题怎么解决,包括我自己,在搜索引擎翻了十几页,看了个遍,翻来覆去就是这么三四个版本,没一个管用的,我是真不知道他们怎么能用这种一眼错的解决方式解决问题,可能是我的vue3和他们的不太一样。

本文主要提供的是解决方法的思路,而不是代码,每个人的程序都不一样,给代码也没办法通用,很多人上来粘几百行代码,看半天没看出他想表达什么,仔细研究发现又是next(to.path)这种自欺欺人的解决方法,但凡用next(to.path)能进得去页面,压根从一开始就不会报这个错。本文主要也是当做一个笔记,没想到一个这么简单的问题就困住了这么长时间,还是修炼不到位,vue3改了挺多地方,目前还是不太适应,慢慢练吧~

有关真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路,切实可行!的更多相关文章

  1. ruby - 如何进行排列以有效地定制输出 - 2

    这是一道面试题,我没有答对,但还是很好奇怎么解。你有N个人的大家庭,分别是1,2,3,...,N岁。你想给你的大家庭拍张照片。所有的家庭成员都排成一排。“我是家里的friend,建议家庭成员安排如下:”1岁的家庭成员坐在这一排的最左边。每两个坐在一起的家庭成员的年龄相差不得超过2岁。输入:整数N,1≤N≤55。输出:摄影师可以拍摄的照片数量。示例->输入:4,输出:4符合条件的数组:[1,2,3,4][1,2,4,3][1,3,2,4][1,3,4,2]另一个例子:输入:5输出:6符合条件的数组:[1,2,3,4,5][1,2,3,5,4][1,2,4,3,5][1,2,4,5,3][

  2. python - 是否可以使用 Ruby 或 Python 禁用 anchor /引用来发出有效的 YAML? - 2

    是否可以在PyYAML或Ruby的Psych引擎中禁用创建anchor和引用(并有效地显式列出冗余数据)?也许我在网上搜索时遗漏了一些东西,但在Psych中似乎没有太多可用的选项,而且我也无法确定PyYAML是否允许这样做.基本原理是我必须序列化一些数据并将其以可读的形式传递给一个不是真正的技术同事进行手动验证。有些数据是多余的,但我需要以最明确的方式列出它们以提高可读性(anchor和引用是提高效率的好概念,但不是人类可读性)。Ruby和Python是我选择的工具,但如果有其他一些相当简单的方法来“展开”YAML文档,它可能就可以了。 最佳答案

  3. ruby - 在 Ruby 中动态创建数组 - 2

    有没有办法在Ruby中动态创建数组?例如,假设我想遍历用户输入的书籍数组:books=gets.chomp用户输入:"TheGreatGatsby,CrimeandPunishment,Dracula,Fahrenheit451,PrideandPrejudice,SenseandSensibility,Slaughterhouse-Five,TheAdventuresofHuckleberryFinn"我把它变成一个数组:books_array=books.split(",")现在,对于用户输入的每一本书,我想用Ruby创建一个数组。伪代码来做到这一点:x=0books_array.

  4. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  5. ruby - 是否可以将 IRB 提示配置为动态更改? - 2

    我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录,但我不知道如何在每个命令后进行提示更新。最终,我想在日常工作中更多地使用IRB,让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO

  6. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行,我想让它们一个接一个地显示,但如果表格不适合当前页面,请将其放在下一页,然后继续。我已将表格放入事务中,以便我可以回滚然后打印它(如果高度适合当前页面),但我如何获得表格高度?我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  7. ruby-on-rails - carrierwave:在序列化动态属性上安装 uploader - 2

    首先,我使用的是rails3.1.3和来自master的carrierwavegithub仓库的分支。我使用after_init钩子(Hook)来确定基于属性的字段页面模型实例并为这些字段定义属性访问器将值存储在序列化哈希中(希望它清楚我是什么谈论)。这是我正在做的事情的精简版:classPage省略mount_uploader命令让我可以访问我想要的属性。但是当我安装uploader时出现错误消息说“nil类的未定义新方法”我在源代码中读到有方法read_uploader和扩展模块中的write_uploader。我如何必须覆盖这些来制作mount_uploader命令使用我的“虚拟

  8. ruby-on-rails - 我需要一个真正的 UNIX RoR 开发环境 - 2

    从一开始,我就是一个Windows高手。我从MS-DOS开始。我安装了Windows2.1以及此后的所有Windows。现在,我家里有10台不同的Windows机器在运行,从Windows7Ultimate到各种版本的WindowsServer。我还没有完成Windows8,也不想去那里。我在服务器和各种软件方面都有UNIX经验,但它并不是我的首选环境。但是,我想我正在转换。我试图假装使用Cygwin和MSYS在Windows下运行UNIX。我的目的是搭建一个开发环境。两者都让我失望了。我花了比开发更多的时间来解决一系列技术问题。这是NotAcceptable。到目前为止,我的Ruby

  9. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知,Jekyll默认分页仅支持index.html,我想创建blog.html并在那里包含分页。有什么解决办法吗? 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件,那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板,而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  10. ruby - 在 Ruby 中动态生成多维数组 - 2

    我正在尝试动态构建一个多维数组。我想要的基本上是这样的(为简单起见写出来):b=0test=[[]]test[b]这给了我错误:NoMethodError:undefinedmethod`test=[[],[],[]]而且它工作正常,但在我的实际使用中,我不会事先知道需要多少个数组。有一个更好的方法吗?谢谢 最佳答案 不需要像您正在使用的索引变量。只需将每个数组附加到您的test数组:irb>test=[]=>[]irb>test[["a","b","c"]]irb>test[["a","b","c"],["d","e","f"]]

随机推荐