Vue中$route和$router

今天我们来探讨一下Vue中 $route 和 $router 两者之间到底有什么区别，我们可以简单理解区别为:  $router 相当于路由器，$route 相当于路由。在Vue3中，可以使用 useRoute 和 useRouter 这两个函数代替 $route 和 $router。

因此$router是用来操作路由的，$route 是用来获取路由信息的。

一、$router

$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vue构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。

举例说明：

1.push：跳转到指定url路径，并在history栈中添加一个记录，点击后退会返回到上一个页面。

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goToRoute=()=>{
    router.push('/your-route-path')
}
</script>

 接收的参数有

• 字符串路径：直接提供目标路径字符串。
• 对象描述：提供一个描述目标位置的对象

2.go：用于在路由历史记录中向前或向后导航，可以接收一个整数作为参数，表示要前进或后退的步数。

// 后退一步
router.go(-1)
// 前进两步
router.go(2)

3.replace：router.replace() 方法与 router.push() 类似，用于更改路由，但有一个重要的区别：router.replace() 不会在历史记录中留下轨迹，而是替换当前的路由。

router.replace('/your-route-path')

二、$route

$route 是 Vue Router 提供的一个全局对象，用于访问当前路由的一些信息，比如路径、参数、查询参数等。

属性：

• name: 当前路由的名称。
• meta: 元信息，可以在路由配置中设置。
• path: 当前路由的路径。
• hash: 当前路由的哈希值。
• query: 当前路由的查询参数。
• params: 路由参数，例如动态路径参数。
• redirectedFrom: 如果路由是通过重定向跳转而来，该属性会包含来源路由的信息。

 

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
    console.log(route.name) // 当前路由的名称
    console.log(route.meta) // 元信息
    console.log(route.path) // 当前路由的路径
    console.log(route.hash) // 当前路由的哈希值
    console.log(route.query) // 当前路由的查询参数
    console.log(route.params) // 路由参数
    console.log(route.fullPath) // 完整路径
    console.log(route.matched) // 匹配当前路由的路由记录数组
    console.log(route.redirectedFrom) // 来源路由信息
</script>