Vue中this.$router和this.$route的理解

在Vue.js中，this.router和this.route是两个非常重要的属性，它们允许我们与Vue路由器进行交互。在本文中，我们将讨论this.router和this.route的用途，并提供一些示例来帮助您更好地理解它们。

this.$router

this.router表示一个全局的路由对象，vue-router的实例，提供addRoutes、back等方法，相当于一个路由器实例。this.router允许我们访问路由器的所有属性和方法，包括：

• currentRoute： 当前激活的路由对象。
• matched： 与当前路由匹配的所有路由记录的数组。
• history： 一个包含应用程序导航历史记录的数组。
• back()： 导航到上一个路由。
• forward()： 导航到下一个路由。
• go(n)： 导航到历史记录中的某个位置，其中n是相对于当前位置的索引。
• push(location)： 将新的路由添加到历史记录堆栈并导航到它。
• replace(location)： 替换当前路由并导航到新的路由。

this.$route

this.$route表示当前激活的路由对象。它包含有关当前路由的各种信息，包括：

• path： 当前路由的路径。
• query： 一个包含当前路由查询参数的对象。
• params： 一个包含当前路由参数的对象。
• hash： 当前路由的哈希值。
• fullPath： 当前路由的完整路径，包括路径、查询参数和哈希值。
• matched： 与当前路由匹配的所有路由记录的数组。
• meta： 一个包含与当前路由相关的所有元数据的对象。

用法示例

以下是一些使用this.router和this.route的示例：

// 使用this.$router导航到某个路由
this.$router.push('/about')

// 使用this.$route获取当前路由的路径
const path = this.$route.path

// 使用this.$route获取当前路由的查询参数
const query = this.$route.query

// 使用this.$route获取当前路由的参数
const params = this.$route.params

// 使用this.$route获取当前路由的哈希值
const hash = this.$route.hash

// 使用this.$route获取与当前路由匹配的所有路由记录
const matched = this.$route.matched

// 使用this.$route获取与当前路由相关的所有元数据
const meta = this.$route.meta

总结

this.router和this.route是Vue.js中非常重要的两个属性，它们允许我们与Vue路由器进行交互。通过了解它们的用途和用法，我们可以轻松地构建动态的单页面应用程序。