工作生活互联网科技

vue-router 基础:4类路由跳转

2019-12-06  本文已影响0人  问题_解决_分享_讨论_最优

普通跳转

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

声明式:

编程式:

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 相关知识点,那也很好理解“前进/后退”的跳转。

打个广告,本人博客地址是:风吟个人博客

上一篇下一篇

猜你喜欢

热点阅读