Vue.js 路由解析：$route 与 $router 的区别与使用场景

作为一名技术人员，今天我想系统地探讨 Vue.js 中与路由相关的两个核心概念：$route 和 $router。了解它们的区别及其使用场景，对于优化路由管理和应用性能极为重要。

$route 概述

$route 是一个只读属性，主要用于获取当前路由的状态信息。在大多数 Vue 应用中，这个属性会在使用 Vue Router 的时候频繁被使用。$route 的核心作用是提供路由信息的透明访问，帮助开发者获取路由参数、路径和查询参数等。

$route 的主要属性包括：

path: 当前路由的完整 URL 路径。

params: 动态路径参数对象，/:id 类型的路由参数会被存储在这里。

query: URL 查询参数对象，例如 page=1 这样的参数会出现在这里。

name: 当前路由的名称，可以通过在路由定义中设置 name 属性得到。

matched: 匹配路由记录的数组，每个记录包含组件信息。

代码示例：

created() {  console.log(this.$route.path); // 输出当前路由路径  console.log(this.$route.params.id); // 动态参数查看  console.log(this.$route.query.page); // 查询参数查看}

$router 概述

$router 是一个完整的 Vue Router 实例，它提供了路由管理的核心功能。这个实例包含导航、路由缓存、路由列表管理以及路由观察器等高级功能。$router 可以通过各种方法进行路由操作，如跳转、替换、历史记录管理等。

$router 的主要方法包括：

push(location): 跳转到指定位置。

replace(location): 跳转到新位置，并清空历史记录。

go(n): �.pagback 或前进若干步。

back(): 返回上一步，等价于 go(-1)。

forward(): 前进一步，等价于 go(1)。

watchRoute(callback):监听路由变化的回调函数。

代码示例：

methods: {  navigateToUserPage(id) {    this.$router.push({      name: 'user',      params: {        id      }    });  },  watchRouteChanges() {    this.$router.watchRoute((to, from) => {      console.log(`从 ${from.path} 到 ${to.path}`);    });  }}

两者区别

要区分 $route 和 $router 的关键在于它们的用途差异：

$route 是只读的，适用于获取当前路由的信息。

$router 是可写的，提供路由管理的功能，适用于导航和状态变化监听。

使用场景

根据需要选择使用 $route 还是 $router：

若需要获取路由信息，使用 $route。

若需要进行路由操作或监控路由变化，使用 $router。

举个实际例子，假设你正在开发一个用户详情页面。在 user/:id 路由中，你可能需要通过 $route 获取 id 参数，而如果你想跳转到其他页面或监控路由变化，则需要使用 $router。

总结

通过以上了解，你应该能够清楚地区分 $route 和 $router 的作用，并根据实际需求选择合适的路由操作方式。在实际开发中，$route 和 $router 可能会同时使用，特别是在需要导航和获取路由信息时。

转载地址：http://ikryk.baihongyu.com/

你可能感兴趣的文章