前言

《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。（里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读）

路由跳转，这属于路由参数获取外，用的第一多的功能。下面示例 vue-router 中 4 种常见的跳转用法。

普通跳转

这是常用的用法，不做过多描述。

声明式：

编程式：

replace 跳转

一开始我不太理解 replace 有什么用，但当我用到 element-ui 中的 breadcrumb 面包屑功能时，注意到了其中 replace 属性。

replace: 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录

有什么用？

我们都知道路由有 history 功能，每当点击浏览器返回时，将回到之前访问的页面记录。

假如页面设计有 3 层（首页、产品列表、产品详情页），当从 1 级页面（首页）跳转到 2 级页面（产品列表）后，我们点击浏览器后退按钮一切都正常；但当 2 级页面跳转到 3 级页面（详情页）后，再返回 2 级页面似乎也没问题，但当你再次返回时，却又回到了 3 级页面（其实用户想回到最初的 1 级页面，虽然代码上符合逻辑，但现在一定出错了）

原先我遇到类似问题，都是在最后级页面通过“写死”的路由地址来解决这个 bug，但其实现在有更好的方式，那就是 replace 。

如下是模拟这 bug 的重现：

tab 从： 路由跳转 –> 动态路由 –> 路由跳转（清除 history） –> 参数传递

最后 浏览器返回 后，路由没有切换到上次访问的路由记录，而是跳到再上次的记录。

声明式：

编程式：

重定向

重定向概念多数出现在服务器端，但路由中的重定向你一定也见过，虽然原理不同，但最终的“效果”类似。

最终你访问 / 时，页面地址会变成 /router ，并渲染 /router 对应的 component。

但需注意：浏览器并没有收到类似 3xx 的重定向状态码。

“前进/后退” 跳转

如下方式，可以在业务代码中实现浏览器返回功能：

类似还有 router.back， router.forward，他们都是基于 window.history 相关 api 来实现的功能：

总结

展示比较基础的路由跳转功能示例。

值得一提的是中间 replace 功能，能解决我们多级页面某些“不合预期”的需求。如果你熟悉 html5 的 pushState 相关知识点，那也很好理解“前进/后退”的跳转。

关于我

一位“前端工程师”，乐于实践，并分享前端开发经验。

如果有问题或者想法，欢迎各位评论留言，愿大家共同进步。

关注【前端雨爸】，查阅更多前端技术心得。