Vue3路由跳转携带参数查询，并调用接口

使用router.push进行路由跳转，进行参数携带，并调用接口，并在跳转过去的页面通过watch监听（使用vue route和watch）

1. 在这个页面想通过点击不同的按钮进行跳转至不同页面，并通过传递的不同type值，让后台查出不同的数据
2. 先给按钮加入点击事件

     <div @click="handleClick1">
          点击跳转1
     </div>

3. 在下方定义route再进行route.push的跳转

   function handleClick1() {
     router.push({
       path: '想要跳转页面的路由',
   
       // 这里的type是动态的，根据type来判断跳转到哪个页面
   
       query: { type: '00' },
     })
     setTimeout(() => {
       // getXXXList是你跳转过去页面需要调用的接口，一般是列表接口
       // 这里的参数type是要给后台传递的参数，后台不同的参数值进行查询
       
       getXXXXList({ pageNum: 1, pageSize: 10, type: '00' })
     }, 1000)
   }

4. 跳转过去，F12网络中调用了这个接口，负载中带有type：00的参数

5. 在你跳转过去的页面中使用watch监听

   const route = useRoute()
   watch(
    // 监听路由中的参数type
     () => route.query.type,
     async (newType) => {
       queryParams.type = newType
       getList()
     },
       //   其中的immediate属性设置为true。
       // 这意味着当组件被创建时，Vue会立即渲染组件，并且在数据发生变化时也会立即更新组件的渲染结果。
     { immediate: true },
   )