当前路由下进行跳转
2019-01-13 本文已影响0人
Doki_455c
业务需求是点击收入类预算,可以将当前的路由进行一次跳转。效果是刷新当前路由,并且将高亮恢复到第一个默认值
标题使用了element ui组件的面包屑。问题是出在当前的路由,因为vue-router会自动识别是否是当前路由,如果是点击当前的路由是不会发生跳转。
![](https://img.haomeiwen.com/i15791603/efdc1523f0e26712.jpg)
![](https://img.haomeiwen.com/i15791603/e0d24c3573ace522.png)
最初使用了页面刷新的效果,发现用户体验度很低,而且页面上会出现空白。
网上查到了方法,点击时将页面写一个空白的路由通过路由传参的方式,将路由跳过去,并把path和name传递过去。
![](https://img.haomeiwen.com/i15791603/5e691881d16b9319.png)
通过点击事件将数组内的path和name值传过去
![](https://img.haomeiwen.com/i15791603/f2cb0231a678f48e.png)
跳路由发现会出现点击时不会进行跳转的问题,使用了this.$nextTick的方法。
![](https://img.haomeiwen.com/i15791603/c4b4b57cdd84b4da.png)
肉眼是看不到变化,但是却实现了将当前路由进行跳转的功能