setup中只有onBeforeRouteLeave、onBeforeRouteUpdate两个钩子函数,没有beforeRouteEnter对应的钩子函数,所以无法在setup中直接使用
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';onBeforeRouteLeave((to,from)=>{console.log(to,from)
})onBeforeRouteUpdate((to,from)=>{console.log(to,from)
})
</script>
解决方案
Tips:使用选项式api,就可以使用beforeRouterEnter这个钩子,同时需要调用页面函数,
- 使用
<script setup>
的组件是默认关闭的,组件实例使用不到顶层的数据和函数。 - 需要配合
defineExpose
暴露给组件实例使用,暴露的响应式数据会自动解除响应式。
<script>
import { defineComponent } from 'vue'
export default defineComponent({beforeRouteEnter(to, from, next) {if (from.path == '/nav') {// sessionStorage.setItem('sign', true)next(vm => {vm.getUseorderlist ();})} else if (from.path.includes('/records-details')) {// sessionStorage.setItem('sign', false)next()}next()},
})
</script><script setup>
const getUseorderlist = async () => {console.log('getUseorderlist ')
}
defineExpose({ getUseorderlist })
</script>