【Vue-Router】编程式导航

Vue Router 提供了两个核心对象，分别是 route 和 router，它们用于处理路由和导航，但在功能和用途上有一些不同：

1. route 对象：

   • route 是一个包含当前路由信息的只读对象，可以通过 route = useRoute() 创建实例对象进行访问。
   • 它包含了当前路由的各种属性，如路径、参数、查询参数、哈希、路由元信息等，如 route.params 获取路由参数，route.query 获取查询参数等。
   • route 对象是响应式的，当路由发生变化时，它会自动更新，因此可以在组件中监听它的变化来执行特定的操作。
   • route 对象的作⽤范围是单次路由匹配，即当路由匹配成功后，route 对象会被创建，并在路由匹配结束后被销毁。

2. router 对象：

   • router 是 Vue Router 的路由实例对象，它负责管理整个路由的状态，可以通过 const router = useRouter() 创建实例对象进行访问。
   • 它包含了路由的跳转方法、路由导航守卫等路由相关的方法和属性。如 push、replace、go，用于在不同路由之间进行导航。
   • router 对象也可以用于访问路由的配置信息，如当前路径、路由参数、路由切换、路由模式（Hash 模式或 History 模式）等。
   • router 对象是全局的，可以在任何地方访问它，而不需要将其传递给组件。
   • 当路由创建时，router 对象会被创建，并在路由创建和销毁的整个生命周期存在。

import {useRoute,useRouter} from 'vue-router'

const route = useRoute()
const router = useRouter()

console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)

总结：

• route 用于访问当前路由的信息，是只读的，响应式的。
• router 用于导航和管理路由，包含路由跳转方法和配置信息，是全局的。
• 两者通常一起使用，通过 router 进行路由跳转，然后在目标组件中使用 route 访问路由信息。