Vue中$router与useRouter的使用场景

在 Vue 3 中，使用 $router 和 useRouter 函数目的都是获取 Vue Router 实例，以进行路由的导航和操作。它们的使用场景略有不同：

1. $router：
   $router 是 Vue Router 的实例，在组件中直接访问 $router 属性可以进行路由的导航和操作。它主要用于在组件内部进行路由的跳转、导航守卫的调用等。在 Vue 组件的方法或生命周期钩子中，你可以直接使用 $router 来访问 Vue Router 的功能。

   export default {
     methods: {
       goToAboutPage() {
         this.$router.push('/about');
       },
     },
   };
   ```
   
   在上面的示例中，`goToAboutPage` 方法使用 `$router.push` 来将路由导航到 `/about` 页面。
   
   

2. useRouter：
   useRouter 是一个函数，用于在 Vue 3 的组合式 API 中获取 Vue Router 的实例。在组合式 API 的函数式组件中使用 useRouter 函数，你可以获取到 Vue Router 的实例，然后进行相应的路由操作。

   import { useRouter } from 'vue-router';
   
   export default {
     setup() {
       const router = useRouter();
       // 使用 router 进行路由操作
       // ...
       return {};
     },
   };
   ```
   
   在上面的示例中，我们使用 `useRouter` 函数在组合式 API 的 `setup` 函数中获取了 Vue Router 的实例，并将其赋值给 `router` 变量。然后，你可以在 `setup` 函数中使用 `router` 对象进行路由操作。
   
   

总结来说，$router 主要用于在 Vue 组件中进行路由操作，而 useRouter 主要用于在组合式 API 的函数式组件中获取 Vue Router 的实例。

疑惑：

vue组件中<script>内容里面不能直接调用$router,而在<template>里面可以直接调用$router

原因：

因为 Vue 的组件实例有不同的作用域和上下文。

在 <script> 部分，Vue 组件的代码被认为是组件实例的配置部分，而不是组件实例本身。在这个配置部分中，$router 并不是直接可用的，因为它是 Vue Router 提供的路由实例，它是在组件实例化之前创建的。

如果你需要在组件的 <script> 部分中使用 $router，可以通过 Vue 的生命周期钩子函数或者组件的方法来访问 $router 对象。例如，在 created 钩子函数中可以访问 $router。

// 在vue2中获取
export default {
  created() {
    console.log(this.$router);
  },
};

在 <template> 部分中，Vue 的模板语法会根据组件实例的上下文进行解析。因此，可以直接在模板中使用 $router 对象。

<template>
  <div>
    <button @click="$router.push('/login')">Go to login</button>
  </div>
</template>

总结起来，$router 在 Vue 组件中的使用方式受到了组件实例的作用域和上下文的限制。在 <script> 部分中，需要通过生命周期钩子函数或者组件方法来访问 $router。而在 <template> 部分中，可以直接使用 $router 对象，因为模板会根据组件实例的上下文进行解析。