wkiwi的博客

vue3中使用beforeRouteEnter

发布时间:12个月前热度: 654 ℃评论数:

在使用Vue3中,遇到需要在路由改变时候,设置页面中数据,但Vu3中router组合式API提供的onBeforeRouteLeave, onBeforeRouteUpdate函数不满足要求,遂采用beforeRouteEnter,但使用了setup语法糖,所以需要重新开一个普通版script来使用beforeRouteEnter。

若你使用的是setup函数

<script>

import { beforeRouteEnter, setup,defineComponent} from '@vue/runtime-core' export default defineComponent({ beforeRouteEnter(to, from, next) { next((vm)=>{ vm.loading = false//直接通过vm访问修改 }) }, setup(){ loading = ref(true) } }) </script>


若你使用的是<script setup>

<script>

import { defineComponent } from 'vue'

export default defineComponent({
beforeRouteEnter(to, from, next) {
next((vm)=>{
vm.loading = false
})
}
})
</script>

<script setup>

import {ref, defineExpose} from '@vue/runtime-core'

const loading = ref(true)
defineExpose({ loading}); //核心代码否则beforeRouteEnter中无法更新到loading数据,同理若该数据需要再父组件通过ref.childComponent.loading更新同样需要加此句将属性暴露出去
</script>

1679105928191.jpg


123123

vue3,setup,beforeRouteEnter,vue3组合式

手机扫码访问