Vue3 ＜script setup＞中使用 beforeRouteEnter 实现公共页面回退到上一个页面

超，不学了

已于 2022-10-18 11:59:18 修改

阅读量3.9k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-10-17 16:13:14 首次发布

本文链接：https://blog.csdn.net/qq_48881427/article/details/127365729

版权

a-->c b-->c 想实现c返回到上一个页面走了太多弯路

最终得出的解法

const onClickLeft = () => {
  router.go(-1);
};

之前的解法用组件内导航守卫

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    next((e: any) => {
      if (from.path == "/index") {
        e.data.routerIndex = "/index";
      }
      if (from.path == "/list") {
        e.data.routerIndex = "/list";
      }
    });
  },
});
</script>
<script setup lang="ts">
import { reactive, ref, onMounted,nextTick } from "vue";
const { useRouter } = require("vue-router");

const router = useRouter();

let data = reactive({
  routerIndex: "",
});

defineExpose({ data });
//返回
//将回调推迟到下一个 DOM 更新周期之后执行
const onClickLeft = async () => {
  await nextTick();
  if (data.routerIndex == "/index") {
    router.push({
      path: "/index",
    });
  }
  if (data.routerIndex == "/list") {
    router.push({
      path: "/list",
    });
  }
};

// const onClickLeft = () => {
//   router.go(-1);
// };

onMounted(() => {
  //   console.log(data.routerIndex); 
});
</script>