vue $route 和 $router 的区别

时间: 2024-10-21 11:09:03

(部分内容来自网络，其真实性存疑，为了避免对您造成误导，请谨慎甄别。)

在 Vue 和 Vue Router 的上下文中，$route 和 $router 是两个非常重要的对象，虽然它们经常一起使用，但各自承担不同的角色。

$route

- 定义：$route 是一个对象，表示当前路由的信息。

- 包含的属性：

  - path: 当前路由的路径。

  - params: 路由参数（当使用动态路由时）。

  - query: URL 查询参数。

  - hash: URL 的哈希部分。

  - name: 路由名称（如果有的话）。

  - meta: 路由的元信息（通常用于权限验证、标记等）。

  - matched: 当前路由的所有匹配的路由记录（数组）。

- 用途：用于获取当前路由的信息，常用于条件渲染、动态导航、获取传递的参数等。

示例：

javascript
// 在 Vue 组件中
export default {
  computed: {
    currentPath() {
      return this.$route.path; // 获取当前路由路径
    },
    queryParams() {
      return this.$route.query; // 获取查询参数
    }
  }
};

$router

- 定义：$router 是 Vue Router 的实例，提供导航功能。

- 包含的属性和方法：

  - push(): 用于导航到一个新路由，增加一个新的历史记录。

  - replace(): 替换当前路由，不会记录到历史记录中。

  - go(): 跳转到指定的历史记录位置。

  - back(): 返回到上一个路由。

  - forward(): 前进到下一个路由。

  - beforeEach(), afterEach(): 设置全局的导航守卫。

- 用途：用于程序化导航，即通过代码控制路由的跳转。

示例：

javascript
// 在 Vue 组件中
export default {
  methods: {
    goToHome() {
      this.$router.push('/'); // 导航到根路由
    },
    goToUser(userId) {
      this.$router.push({ path: /user/${userId} }); // 导航到动态路由
    }
  }
};

总结

- this.$route：用于获取当前路由的状态和信息（读取）。

- this.$router：用于程序化控制路由跳转和导航（写入）。

理解它们的区别有助于你在 Vue 应用中有效地管理路由和导航。