解决从登录页通过this.$router.push跳转首页后 点返回健路由变而页面不变的问题

做H5项目的时候遇到一个问题,我从 login 登录页通过 this.$router.push({ name: 'home' })路由登录成功后跳转到首页,但在ios系统下,会有一个默认返回条,点击返回键出现以下情况,路由显示的是回到登录页,而页面却还是首页。

解决思路:

开始我试着把push改为replace,但是发现并没什么卵用,还是会出现问题,所以只好用路由导航守卫去监听。

在首页加入beforeRouteLeave,监听到to.name如果是login的话就不跳转,否则就跳转,然后问题就解决了。

beforeRouteLeave (to, from, next) {
    if (to.name === 'login') {
        next(false)// 不跳转
    } else {
        next() // 跳转到另一个路由
    }
}

解决从登录页通过this.$router.push跳转首页后 点返回健路由变而页面不变的问题_第1张图片

你可能感兴趣的:(H5页面,vue)