vue如何清除浏览器历史栈

问题1:由于页面各种跳转,有时候某个页面B会跳转到首页,此时在首页返回上一页应该离开这个项目,而不是返回到B页面。

清除浏览器历史栈
import { useRouter } from "vue-router";
...
const router = useRouter();
const routeHistory = history.length - 1; // 拿到历史记录长度
  if (routeHistory > 1) {
    router.go(-routeHistory);
}

问题2:由于本项目是h5项目,有其他h5(A)跳转到该h5(B)首页,以上代码导致页面直接跳转h5(A)的首页了

在beforeRouteEnter中添加判断后清除浏览器历史栈
import { useRouter } from "vue-router";
...
setup() {
  const router = useRouter();
  const state = reactive({
    flag: true // 是否刚进入改应用
  });
  onMounted(() => {
    if(state.flag) {
      const routeHistory = history.length - 1;
      if (routeHistory > 1) {
        router.go(-routeHistory);
      }
    }
  }
},
beforeRouteEnter(to, from, next) {
  next((state:any) => {
  	// from.fullPath为/是刚进入该应用
  	// 不是/说明是该应用的其他页面返回的
    state.flag= from.fullPath != '/';
  });
},

如过有更好的写法欢迎建议和指正

Logo

前往低代码交流专区

更多推荐