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过期这种情况。
你们的业务逻辑是怎么样的