在Vue3中， Vue Router 提供新的API更好地与 Composition API 集成。提供useRouter、useRoute两个函数，在用于组件中访问当前路由信息和路由实例。

• useRoute

返回当前的路由地址，这个路由对象包含了当前路由的许多信息，比如路径、参数、查询、hash等。相当于在模板中使用 $route。

useRoute实例

import { useRoute } from 'vue-router'  
export default {  
  setup() {  
    const route = useRoute()  
    console.log(route.path) // 输出当前路由的路径  
    console.log(route.params) // 输出当前路由的参数  
    console.log(route.query) // 输出当前路由的查询参数  
    // ... 其他操作  
  }  
}

• useRouter

返回路由器实例。相当于在模板中使用 $router。通过这个路由实例，我们可以进行诸如导航、编程式导航等操作。

useRouter实例

import { useRouter } from 'vue-router'  
export default {  
  setup() {  
    const router = useRouter()  
    router.push('/home') // 导航到/home路径  
    router.replace('/about') // 替换当前路由为/about路径  
    router.go(-1) // 后退一步  
    // ... 其他操作  
  }  
}

useRoute 和 useRouter 区别

• useRoute 主要用于获取当前路由的信息，适用于静态展示当前路由信息的场景。
• useRouter 主要用于获取路由实例，适用于需要进行动态路由操作的场景，比如跳转到新的路由。