vue3组合式api：useRoute() useRouter()

      在Vue 3中，useRouter 和 useRoute 是与 Vue Router 4.x 配合使用的两个函数，用于在组件中获取当前路由器实例和当前路由信息。这两个函数是 Vue Router 提供的 Composition API 的一部分，它们的主要作用是让你能够在组件中更方便地访问和操作路由信息。

一、useRouter

   useuseRouter 函数用于获取当前的路由器实例。通常，在组件中通过 useRouter 可以方便地获得当前应用的路由器实例，然后可以通过这个实例进行一些路由相关的操作。

<script setup lang="ts">
import { useRouter} from "vue-router";
const router = useRouter();

//获取当前路径
 const route= router.currentRoute.value.fullPath

const func =() => {
  router.push('/');
}
const sjca =(id:number) => {
  router.push(`/user/${id}`);
}
</script>

打印router： 

 

二、useRoute

        useRoute 函数用于获取当前的路由信息。通过 useRoute，你可以在组件中获取当前路由的参数、查询字符串、路径等信息。 

<script setup lang="ts">
import { useRoute} from "vue-router";
const route = useRoute();

    // 获取当前路由的参数
    const userId = route.params.id;
    //获取当前路径
    const userId = route.fullPath
    // 获取当前路由的查询字符串参数
    const searchQuery = route.query.search;
</script>

        在上面的例子中，useRoute 返回的 route 对象包含了当前路由的各种信息，你可以从中提取出你需要的数据，比如路由参数和查询字符串参数。 

打印route：

应用场景

导航操作： 使用 useRouter 可以在组件中进行路由的导航，例如在用户执行某个操作时跳转到其他页面。

动态展示内容： 使用 useRoute 可以根据当前路由的参数或查询字符串动态地展示内容，适用于需要根据路由信息来渲染不同内容的场景。

条件渲染和样式控制： 结合 useRoute 可以根据当前路由的状态进行条件渲染或样式控制，使得组件的呈现更具灵活性。

页面级别的逻辑处理： 在一些需要在页面级别处理逻辑的场景中，使用 useRouter 和 useRoute 可以方便地获取和处理路由相关信息。

总的来说，useRouter 和 useRoute 主要用于在组件中方便地获取和操作路由信息，使得在 Vue 3 中使用 Vue Router 更加灵活和方便。