今天做手机端左上角回退按钮的时候,解锁了一个很绝望的操作:
如果我在其他页面直接输入地址访问我的项目后,在项目中点击回退,又会直接跳回那个网页。
这和浏览器的回退功能有什么区别!!!手机端网站不都是如果没有上一页就会跳回首页吗???
// 使用vue-router的回退方法go和back都会出现这种情况 this.$router.go(-1); this.$router.back(-1);
参考思路:
在临时存储(sessionStorage)中设置一个变量,类型为数组,用于记录每一次路由的变化。
用户每进行跳转,都向这个数组的开头插入上一个页面的url。
用户每次点击后退按钮时,先将页面跳转到这个数组开头的url,再将这个url从数组中删除。
从而实现返回上一页功能
注意:
1.无论什么url,只要是首次进入或者刷新页面,返回上个页面的path属性永远都是”/”
2.首页不应设置后退按钮
代码如下
export default { data() { return { historyUrl: sessionStorage.historyUrl ? JSON.parse(sessionStorage.historyUrl) : [], backFlag: false, // 记录本次路由更新是否为用户的后退操作 } }, methods: { goBack() { // 返回按钮的click事件 this.backFlag = true; // 设置本次页面跳转为后退跳转,让本次跳转不写进historyUrl记录中 this.$router.push(this.historyUrl[0]); this.historyUrl.splice(0,1); } }, watch: { '$route'(to, from) { // 记录历史访问页面 -- Start if(!this.backFlag) { // 不是用户主动后退导致的路由跳转 if(from.path != this.historyUrl[0]) { // 避免连续写入两个同样的url if(this.historyUrl.length > 0 && from.path == "/") { // 如果历史访问地址已经有数据了,而且识别到上一页面为"/",很有可能是用户刷新导致进入的判断,所以不写入 } else { this.historyUrl = [from.path, ...this.historyUrl]; // 在historyUrl的开头插入一个历史访问地址 } } } else { this.backFlag = false; // 本次由于是用户主动后退,不进行记录。但还原此标记,使下一次触发路由跳转能够正常判断。 } sessionStorage.historyUrl = JSON.stringify(this.historyUrl); // 页面每次发生跳转,都将历史访问地址写进临时存储中,方便刷新后的读取 // -- End } } }