vue3 如何全局监听URL变化

在 Vue 3 中，你可以使用 `watch` 函数来全局监听 URL 的变化。首先，你需要在 Vue 3 项目中安装 Vue Router，并配置路由规则。

安装 Vue Router：

npm install vue-router

然后，在你的 Vue 3 应用程序的入口文件（通常是 `main.js`）中，按照以下方式设置全局的路由监听：

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 定义你的路由规则
    // ...
  ]
});

const app = createApp(App);

// 全局监听 URL 变化
router.afterEach((to, from) => {
  // 在这里处理 URL 变化的逻辑
  console.log('URL 变化了', to, from);
});

app.use(router);
app.mount('#app');

在上面的代码中，我们通过 `createRouter` 创建了一个路由实例，并通过 `afterEach` 方法在每次路由切换后触发回调函数。你可以在回调函数中处理 URL 变化的逻辑。在这个例子中，我们简单地打印了一条消息到控制台。

请确保在 `createApp` 之前使用路由插件 `app.use(router)` 安装路由实例。这样就可以全局监听 URL 的变化并执行相应的操作了。