$route 和 $router 的区别是什么?

在 Vue Router 中，$route 和 $router 是两个不同的对象，分别用于不同的目的。以下是它们的主要区别：

1. $route

• 定义：$route 是一个路由对象，包含当前路由的信息。
• 用途：用于访问当前路由的状态和参数。
• 包含的属性：
  • path: 当前路由的路径。
  • params: 动态路由匹配的参数。
  • query: URL 查询参数。
  • hash: URL 的哈希部分。
  • name: 当前路由的名称（如果定义了）。
  • meta: 路由元信息。

示例：

export default {
  mounted() {
    console.log(this.$route.path); // 输出当前路由的路径
    console.log(this.$route.params); // 输出动态路由参数
    console.log(this.$route.query); // 输出查询参数
  },
};

2. $router

• 定义：$router 是一个路由实例，提供了导航和路由管理的方法。
• 用途：用于程序化导航和控制路由的跳转。
• 包含的方法：
  • push(location): 跳转到指定的路由。
  • replace(location): 替换当前路由，不留历史记录。
  • go(n): 前进或后退 n 步。
  • back(): 回到上一个路由。
  • forward(): 前进到下一个路由。

示例：

export default {
  methods: {
    navigateToHome() {
      this.$router.push('/home'); // 跳转到首页
    },
    replaceWithLogin() {
      this.$router.replace('/login'); // 替换当前路由为登录页
    },
  },
};

总结

• $route 是一个只读对象，提供当前路由的信息，适用于获取路由状态。
• $router 是一个路由实例，提供可用于导航的方法，适用于控制路由跳转