Vue3 <script setup> 中使用 beforeRouteEnter 实现公共页面回退到上一个页面
a-->c b-->c 想实现c返回到上一个页面
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)