在 Vue.js 中，$route 和 $router 都是 Vue Router 提供的对象，用于管理应用的路由。尽管它们名称相似，但它们的作用和使用场景有所不同。下面是对它们的详解、区别以及示例代码。
1. $route
$route 是一个当前激活路由的对象。它包含了路由的 信息，比如当前的路径、路由参数、查询参数、路由名称等。$route 是只读的，你不能通过它来导航到另一个路由。
常见的 $route 属性
path: 当前路由的路径字符串。
params: 动态路径参数，例如 /user/:id 中的 id。
query: 查询参数，例如 /user?id=123 中的 id。
name: 当前路由的名称（如果有的话）。
hash: 当前路由的 hash 值。
fullPath: 完整的 URL 解析后的路径，包括 query 和 hash。
matched: 一个数组，包含当前路由匹配的所有路由记录（route records）
<template>
<div>
<h2>当前路径: {{ $route.path }}</h2>
<p>路由参数: {{ $route.params }}</p>
<p>查询参数: {{ $route.query }}</p>
</div>
</template>
<script>
export default {
mounted() {
console.log(‘当前路径:’, this.$route.path);
console.log(‘路由参数:’, this.$route.params);
console.log(‘查询参数:’, this.$route.query);
}
}
</script>
当前路径: {{ $route.path }}
路由参数: {{ $route.params }}
查询参数: {{ $route.query }}
2. $router
$router 是整个应用的路由器实例，它包含了导航的方法和路由配置。你可以通过 $router 来编程式地导航到不同的路由，或是执行其他与路由相关的操作。
常见的 $router 方法
push(location): 导航到一个新的路由。location 可以是一个字符串路径或者一个描述目标路由的对象。
replace(location): 与 push 类似，但不会在导航历史中留下记录。
go(n): 在浏览器历史记录中前进或后退 n 步。
back(): 导航到上一个路由。
forward(): 导航到下一个路由。
beforeEach(callback): 注册一个全局前置守卫。
afterEach(callback): 注册一个全局后置守卫。
<template>
<div>
<button @click=”goHome”>回到首页</button>
<button @click=”goBack”>后退</button>
</div>
</template>
<script>
export default {
methods: {
goHome() {
this.$router.push(‘/’);
},
goBack() {
this.$router.back();
}
}
}
</script>
3. 区别总结
作用不同:
$route 用于获取当前路由的 信息，如路径、参数等，是只读的。
$router 用于 导航 和控制路由的行为，是一个全局路由实例。
用法不同:
$route 常用于模板或组件中获取当前路由相关的信息。
$router 常用于编程式导航，例如在点击事件中跳转到另一个页面。
4. 实际场景
如果你只是需要读取当前路由的信息，例如显示当前的路径或根据路由参数显示不同的内容，使用 $route。
如果你需要在代码中主动地改变路由，例如点击按钮跳转到另一个页面，使用 $router
