vue 实现清空回到首页

vue |

在 Vue 项目中，如果我们想从子路由跳转回首页，并且清空中间的路由历史记录，可以这样实现：

  1. 清空路由历史记录使用 $router.go() 方法，传递一个负数作为参数，这样可以向后遍历路由记录，比如:
1
2
// 清空路由历史记录
this.$router.go(-this.$route.matched.length)

这里用到了一个关键属性 $route.matched，它包含当前匹配的路由记录数组。所以 $route.matched.length 就是当前匹配的路由记录数量。传递这个负数，就可以逐步遍历清空这些路由记录。

  1. 跳转首页清空记录后，再用 $router.push() 跳转到首页:
1
2
// 跳转首页
this.$router.push({ name: 'home' })

这里通过路由名称 home 来指定要跳转的首页路由。3. 合并写法可以把上述两步合并成一步:

1
2
// 回首页，并清空历史记录
this.$router.go(-this.$route.matched.length + 1)

直接传递一个负数，值的计算是当前路由数量减 1，即可以先清空记录，再回首页。