vue监听路由

两种方式监听路由

一种是使用vue2的写法，还有一种是组合式api的写法。

vue2监听路由

export default defineComponent({
  watch: {
    $route: {
      handler: (val, oldVal) => {
        console.log(val);
      },
      immediate: true,
    },
  },
});

这样就可以监听到所有路由切换了。

vue3组合式api监听路由

组合式api里使用watch()用来监听数据变化。虽然使用useRoute()可以获取到路由对象，但是监听路由变化不要使用它。组件路由钩子可能有时也不是很有用。
比如下面的写法是不行的：

import { watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
watch(route, (val, oldVal) => {
	// 这里监听路由，你会发现一些诡异的情况
}, {
	immediate: true,
});

正确写法是使用useRouter():

import { watch } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
watch(
	() => router.currentRoute.value,
	(val, oldVal) => {
		// 这里可以正确监听路由
	},
	{
		immediate: true,
	}
)