阿珊解说Vue中`$route`和`$router`的区别

news2024/10/22 14:29:26

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 摘要：
- 引言：
- 正文：
- - 1. 🔧 `$route`
  - 2. 🔧 `$router`
  - 3. 🔧 `$route`和`$router`的区别
- 🌟 总结
- 参考资料：

摘要：

🤔 在Vue开发中，我们经常使用$route和$router这两个概念，但你知道它们之间的区别吗？本文将详细解析$route和$router的不同之处，帮助读者更好地理解和使用它们。👩‍💻

引言：

🌈 Vue.js框架以其简洁的语法和声明式的数据绑定而受到开发者的喜爱。在Vue中，路由管理是实现单页面应用（SPA）的关键功能。在路由中，我们经常听到$route和$router这两个概念，但你知道它们之间的区别吗？在这篇文章中，我将带你深入了解$route和$router的不同之处。🚀

正文：

1. 🔧 `$route`

类型：$route是一个对象，它包含了当前路由的信息，如路径、查询参数、路由参数等。
应用场景：通常用于获取当前路由的信息，如在导航守卫中检查当前路由是否符合要求。

$route 是 Vue.js 中的一个对象，它用于管理当前路由的信息。它包含了当前路由的路径、查询参数、路由参数等信息。$route 对象可以在任何组件内访问，它是由 Vue Router 自动注入的。

以下是一些常用的 $route 属性和方法：

$route.path：当前路由的路径。
$route.params：当前路由的动态参数对象。
$route.query：当前路由的查询参数对象。
$route.name：当前路由的名称。
$route.matched：当前路由匹配的路由记录数组。
$route.isActive：当前路由是否处于激活状态。
$route.isExactActive：当前路由是否处于精确激活状态。
$route.replace：将当前路由替换为指定的路由。

以下是一个简单的示例：

<template>
  <div>
    <p>当前路由路径：{{ $route.path }}</p>
    <p>当前路由参数：{{ $route.params }}</p>
    <p>当前路由查询参数：{{ $route.query }}</p>
    <p>当前路由名称：{{ $route.name }}</p>
    <p>当前路由匹配的路由记录数组：{{ $route.matched }}</p>
    <p>当前路由是否处于激活状态：{{ $route.isActive }}</p>
    <p>当前路由是否处于精确激活状态：{{ $route.isExactActive }}</p>
    <button @click="$route.replace('/about')">将当前路由替换为 /about</button>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

在这个示例中，我们展示了如何使用 $route 对象的一些属性和方法。当点击按钮时，会将当前路由替换为 /about。

2. 🔧 `$router`

类型：$router是一个实例，它包含了路由器的配置和操作方法，如添加路由、导航等。
应用场景：通常用于进行路由的跳转、添加导航守卫等操作。

$router 是 Vue.js 中的一个对象，它用于管理路由。它包含了路由的配置、导航、历史记录等功能。$router 对象可以在任何组件内访问，它是由 Vue Router 自动注入的。

以下是一些常用的 $router 属性和方法：

$router.currentRoute：当前路由对象，包含了当前路由的路径、参数、查询等信息。
$router.history：路由历史记录，是一个数组，包含了每次路由跳转的记录。
$router.current：当前路由在路由历史记录中的索引。
$router.replace：将当前路由替换为指定的路由。
$router.push：跳转到指定的路由。
$router.back：后退到上一个路由。
$router.forward：前进到下一个路由。

以下是一个简单的示例：

<template>
  <div>
    <p>当前路由路径：{{ $router.currentRoute.path }}</p>
    <p>当前路由参数：{{ $router.currentRoute.params }}</p>
    <p>当前路由查询参数：{{ $router.currentRoute.query }}</p>
    <button @click="$router.replace('/about')">将当前路由替换为 /about</button>
    <button @click="$router.push('/contact')">跳转到 /contact</button>
    <button @click="$router.back()">后退</button>
    <button @click="$router.forward()">前进</button>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>