onBeforeRouteUpdate((to) => { console.log(to.query.id); axios.get(/hws/square/basic/facade?squareId=${to.query.id}).then(res => { console.log(res.data.result); list.splice(0) list.push(res.data.result) }) }); 改成vue3中watch监听的写法

在Vue 3中，我们可以使用`watchEffect`或`watch`函数来监听路由变化。这里是使用`watch`函数的示例代码：

import { watch } from 'vue'

export default {
  setup() {
    const list = reactive([])

    watch(
      () => $route.query.id,
      (id) => {
        axios.get(`/hws/square/basic/facade?squareId=${id}`).then(res => {
          list.splice(0)
          list.push(res.data.result)
        })
      },
      { immediate: true }
    )

    return {
      list
    }
  }
}

在`setup`函数中，我们使用`watch`函数来监听`$route.query.id`的变化。`$route`是Vue Router提供的一个全局变量，用于访问当前路由信息。当`$route.query.id`发生变化时，`watch`函数的回调函数会被触发，我们在回调函数中发送请求并更新`list`数组。`immediate`选项表示在组件创建时立即执行一次回调函数，以便初始化数据。

需要注意的是，使用`watch`函数需要导入Vue的`watch`函数。同时，在Vue 3中，我们还需要导入`reactive`函数来创建响应式数据对象。