Vue路由指定重定向跳转(电商项目中的路由跳转逻辑)
需求概述:当用户没有进行登录时是不允许跳转到 个人订单,我的购物车等页面的,如果用户在未登录状态下点击了这些选项,则跳转到登录页面让用户进行登录。当用户登录完成之后不是跳转回首页,而是直接跳转回用户点击的那个选项本应跳转的页面。比如点击个人订单跳转到登录页面了,完成登陆后直接跳转回个人订单页面。解决方法:1.在进行路由跳转登录页面时动态的给登录页面传递 query 参数。(下方图片代码是写在全局路
·
需求概述:
当用户没有进行登录时是不允许跳转到 个人订单,我的购物车等页面的,如果用户在未登录状态下点击了这些选项,则跳转到登录页面让用户进行登录。
当用户登录完成之后不是跳转回首页,而是直接跳转回用户点击的那个选项本应跳转的页面。
比如点击个人订单跳转到登录页面了,完成登陆后直接跳转回个人订单页面。
解决方法:
1.在进行路由跳转登录页面时动态的给登录页面传递 query 参数。(下方图片代码是写在全局路由守卫当中的)
2.因为在跳转时给 login 登录页面传递了 query 参数,所以在该登录路由中是可以通过 $route.query获取到传递过来的 query 参数的。
3.利用这个传递过来的 query 参数进行判断,实现登录后跳转回原本应该跳转的对应页面。
(以下图片是登录组件页面点击登录按钮触发的回调函数内容)
当没有携带query参数跳转到登录页面的时候,此时 $route.query身上自然是没有 redirect 属性的,所以为 undefined。.
更多推荐
已为社区贡献2条内容
所有评论(0)