$route 和 $router详解、区别、示例代码

Daniel的万事通杂货铺

于 2024-07-13 00:00:27 发布

阅读量205

点赞数

文章标签： javascript 前端 vue.js

原文链接：https://dajianshi.blog.csdn.net/article/details/140290902?spm=1001.2014.3001.5502

版权

在 Vue.js 中，$route 和 $router 是与路由相关的两个重要概念，它们主要在使用 Vue Router 时发挥作用。让我们分别了解这两个概念以及它们的区别，并通过示例代码来加深理解。

$route
$route 是一个只读的属性，用于访问当前激活的路由的状态。它包含了当前路由的所有信息，例如路径名、查询参数、路由参数等。$route 对象通常有以下属性：

path: 当前路由的完整路径。
params: 匹配动态片段的参数对象。
query: 查询参数对象。
name: 当前路由的名称。
matched: 数组形式的匹配记录，包含所有匹配的路由记录的组件。
示例代码：
export default {
created() {
console.log(this.$route.path); // 输出当前路由的路径
console.log(this.$route.params.id); // 如果有动态参数，比如 /user/:id，则输出 id 的值
console.log(this.$route.query.page); // 如果 URL 带有查询参数 page=1，则输出 1
},
};
1
2
3
4
5
6
7
$router
$router 则是一个完整的 Vue Router 实例，它提供了与导航和路由相关的所有功能。你可以通过 $router 来导航到其他路由、获取所有路由列表、监听路由变化等。$router 常见的方法包括：

push(location): 导航到下一个位置。
replace(location): 导航到下一个位置，但是不会添加历史记录。
go(n): 在浏览器历史中向前或后退 n 步。
back(): 返回上一步，相当于 go(-1)。
forward(): 向前进一步，相当于 go(1)。
watchRoute(callback): 监听路由的变化，每当路由发生改变时调用回调函数。
示例代码：
export default {
methods: {
navigateToUserPage(id) {
this.$router.push({ name: 'user', params: { id } });
},
watchRouteChanges() {
this.$router.watchRoute((to, from) => {
console.log('从 ', from.path, ' 到 ', to.path);
});
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
区别
$route 是只读的，用来获取当前路由的信息。
$router 是一个完整的路由管理器，提供了路由导航和监听的功能。
使用场景
当你需要获取当前路由的信息时，使用 $route。
当你需要进行页面跳转或监听路由变化时，使用 $router。
通过上述解释和示例代码，你应该能更清楚地理解 $route 和 $router 在 Vue.js 应用中的作用和区别。
————————————————