vue3中beforeRouteEnter 的使用和注意点

beforeRouteEnter 在vue3中的使用

有些时候，我们需要在知道是从哪一个页面过来的。
然后做一些逻辑处理
比如说：从A->B，B页面需要调用接口,回填B页面中的数据
B-->c返回-->B 不需要调用接口，直接读取内存中的值。
这个时候我们就可以使用 beforeRouteEnter 来解决。
beforeRouteEnter:可以知道是从哪一个页面该页面的。

需求描述

从home1进入home2页面，数据从张三变成李四。
从其页面进入，数据仍然是张三

实现功能 01

<template>
   <div class=''>
    <h2>数据2--{{ obj}}</h2>
   </div>
</template>
<script lang='ts'>
import { defineComponent, reactive } from 'vue'
export default defineComponent({
    setup() {
        let obj=reactive({
            name:'张三',
        })
        return {obj}
    },
    beforeRouteEnter(to, from, next) {
        console.log(to);  //上一个页面前往的的页面(当前页面)
        console.log(from);//来自哪一个页面
        next((e:any) => {
            // 这个回调参数e,包含setup中暴露出去的数据以及内置方法
            window.console.log(e)
            // 获取是否来自home1页面
            if(from.path=='/home1'){
                e.obj.name='李四'
            }
        })
    },
})
</script>

需要注意的点

1. 从home1页面进入home2页面。
from.path等于 '/home1'
但是你刷新页面后，from.path可能就不在是'/home1'
可能就是 '/'了

2.当你在home2页面操作的时候，token过期这种情况。
你们的业务逻辑是怎么样的