vue3中beforeRouteEnter 的使用和注意点
Vue3 注意 使用
2023-09-27 14:22:17 时间
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过期这种情况。
你们的业务逻辑是怎么样的
相关文章
- 【Vue3】自定义ref(customRef)的用法和示例(转)
- 【Vue3】Vue3中的hooks函数示例(图文+代码)
- 【Vue | vue3】Vue2和Vue3中Element-Ui 的安装与使用
- vite&vue3中使用批量导入 import.meta.glob import.meta.globEager
- 浅析Vue3动态组件怎么进行异常处理
- vue3学习笔记(兄弟组件传参)
- Vue3新特性体验--上(内附简单实例,可直接使用)
- vue3播放m3u8视频(videoJS)
- Vue3之新的api
- Vue3实现组件级基类的几种方法
- 【摸鱼神器】一次搞定 vue3的 路由 + 菜单 + tabs
- 从 jQuery 到 Vue3 的快捷通道
- vue3组合API注意点(系列三)
- vue3 中 使用reactive,数组没有响应
- 20.0 vue3中使用vue-router路由跳转,参数(query,params)的传递与接收(包括请求操作)