vue3 watch监听url

Vue3中的`watch`可以用于监听URL的变化，特别是在单页应用(Single Page Application, SPA)中，当路由发生变化时，我们可以使用`watch`来响应并更新组件的状态。通常，我们会结合`beforeRouteUpdate`或`beforeRouteEnter`钩子来配合`watch`一起工作。

以下是基本的步骤：

1. 定义一个`watch`属性，在这个例子中，假设我们关注的是`$route.path`：

export default {
  setup() {
    const url = ref(window.location.pathname); // 使用ref包装url以便于双向数据绑定

    watch(() => $route.path, (newPath) => {
      if (newPath !== url.value) {
        // 当路径改变时，这里处理新的url，比如更新组件状态、调用API等
        console.log('URL changed:', newPath);
        // 更新url值，如需触发视图更新
        url.value = newPath;
      }
    });

    return { url };
  },
};

2. 在模板中使用`{{ url }}`显示当前路径。