Vue路由params丢失、错误路由白屏的解决方案

使用带params的路由的时候,如果params不正确,路由就不会渲染,导致页面出现空白,本来想跟query一样,指定其中一个query为默认值,没想到并不能如己所愿,不过最终问题还是解决了,采用了一个路由的api来判断当前路由是否存在,顺带解决了其他非正常路由的指向问题。

定位问题:

带有params的路由,比如一些文章页、用户个人页等等,输入 ./article/123 这样是可以正常进入文章ID为123的详情页,但是如果只有 ./article ,这样页面就会变成空白。

解决思路:

1、使用了 $route.matched 来判断to的路由对象是否存在,$route.matched 返回的是一个数组,如果数组为空,则表示接下来要去的非我们配置好的路由页面。

2、使用beforeEach,在进入路由之前,判断接下来是否异常,如果异常,先看原来的路径是否有路由,有的话返回上一页,没有的话,回到首页。

附上官方文档:

https://router.vuejs.org/zh/api/#路由对象属性

相关代码:

放到main.js里即可。

为您推荐

Leave a Reply

Your email address will not be published. Required fields are marked *