Vue3 setup路由进入以及变化问题

1. 起因

在Vue 3中，<script setup>语法糖提供了一种更加简洁和组合式的方式来定义组件。然而，由于<script setup>的特性，它不能直接使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave这些导航守卫。

但是vue-router中有两个的类似函数可以触发路由离开和变化，只需要import一下就可以。

language-js

<script setup>
	import {
    onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
	
	onBeforeRouteUpdate((to, from, next) => {
   
		console.log("onBeforeRouteUpdate",to,from, typeof next)
		next();
	})
	onBeforeRouteLeave((to, from, next)=>{
   
		console.log("beforeRouteLeave",to,from, typeof next)
		next()
	})
</script>

但是却没有beforeRouteEnter的替代品。

2. 浏览过的代替方法

https://github.com/vuejs/rfcs/discussions/302#discussioncomment-2794537
https://blog.richex.cn/vue3-how-to-use-beforerouteenter-in-script-setup-syntactic-sugar.html
https://blog.csdn.net/oafzzl/article/details/125045087

但是都是在<script setup>之上新加了第二个<script>，用第二个<script>来使用无setup的beforeRouteEnter。限制很多，尤其是两个script之间互动很麻烦，甚至无法实现。

3. 还是Watch

https://juejin.cn/post/7171489778230100004
https://blog.csdn.net/m0_55986526/article/details/122827829

下面是一个当路由从"/stock/move/moveDetail"到"/stock/move/moveSearch"触发函数的例子。同时第一次进入时也会触发watch，就相当于beforeRouteEnter了。

language-js

<script setup>
	import {
   watch} from "vue";
	import {
   useRouter} from "vue-router";
	let router = useRouter()
	// 监听当前路由变化
	watch(() => router.currentRoute.value,(newPath, oldPath) => {
   
		if (newPath != null && oldPath != null && "fullPath" in newPath && "fullPath" in oldPath && newPath["fullPath"] === "/stock/move/moveSearch" && oldPath["fullPath"] === "/stock/move/moveDetail"){
   
			onSubmitQuiet()
		}
	}, {
    immediate: true});
</script>