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過期這種情況。
你們的業務邏輯是怎么樣的