vue-router如何让页面不回退并跳转到之前进入的页面?

Question

用户从首页或个人中心页面进入消息页面,点击某一条消息,进入消息详情页面,点击返回按钮,返回到消息页面.如何使用vue-router让用户在消息页面点击返回按钮,不会进入消息详情页面,而是回到首页或者个人中心页面?

Answer 1

可以使用导航守卫

beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
}

在里面判断，如果 from 是消息页面，直接 router.push 到首页或者个人中心页面就可以了

Answer 2

谢谢各位了,我已经解决了
先把从哪个页面进入的url存起来,然后传递到下个页面里,返回的时候直接取存起来的这个值就可以

Answer 3

1.点击的是消息页里有返回按钮

//点击返回按钮时，加上这段
this.$router.push({
    name: "/*首页或者个人中心页*/"
});

2.点击的是浏览器的返回按钮

beforeRouteLeave(to, from, next){
  if(to.name ==='/*消息页*/' ){
    next({name: "/*首页或者个人中心页*/"});
  }else {
    next();
  }
},