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

遇見問題，這是你成長的機會，如果你能夠解決，這就是收獲。

作者：晚來南風晚相識

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。