Vue.js 获取路由

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。它提供了路由功能来帮助我们构建单页面应用程序（SPA）。使用路由，我们可以在不刷新整个页面的情况下切换到不同的视图。

在 Vue.js 中获取当前路由的信息非常简单。我们可以使用内置的 VueRouter 对象来访问当前路由信息和操作路由。

以下是一些常用的方法来获取路由信息：

获取当前路由对象

this.$route

this.$route 返回当前活跃的路由对象，该对象包含以下属性：

• name: 当前路由的名称
• path: 当前路由的路径
• params: 路由中的参数
• query: 查询参数
• hash: URL 中的 hash 值
• fullPath: 完整的 URL 路径
• matched: 与当前路由相匹配的所有嵌套路径片段的路由记录数组

例如，我们可以通过 this.$route.path 来获取当前路由的路径。

监听路由变化

我们可以使用 watch 来监听路由的变化，并在路由发生改变时执行一些操作。

watch: {
  '$route'(to, from) {
    // 路由变化时执行的代码
  }
}

在上面的代码中，to 参数表示目标路由对象，from 参数表示上一个路由对象。通过比较这两个对象，我们可以执行一些特定的操作，例如根据路由变化来更新页面内容。

获取路由参数

在路由中，我们可以定义一些参数，用来在不同的路由之间传递数据。我们可以使用 $route.params 来获取这些参数。

this.$route.params.paramName

paramName 是我们在定义路由时指定的参数名称。例如，如果我们定义了一个路由 /user/:id，并且当前路由为 /user/1，那么我们可以通过 this.$route.params.id 来获取 id 的值。

获取查询参数

查询参数是在 URL 中的 ？ 后面跟着的键值对。我们可以使用 $route.query 来获取这些查询参数。

this.$route.query.paramName

paramName 是查询参数的名称。例如，如果当前 URL 为 /user?id=1&name=John，那么我们可以通过 this.$route.query.id 和 this.$route.query.name 来获取 id 和 name 的值。

修改路由

有时候我们需要通过代码来修改当前的路由，例如跳转到另一个页面或刷新当前页面。我们可以使用 $router 对象来操作路由。

以下是一些常用的方法来修改路由：

跳转到指定路由

this.$router.push('/path')

上面的代码将会把当前路由切换到 /path。

跳转到命名路由

this.$router.push({ name: 'routeName' })

上面的代码将会跳转到名为 routeName 的路由。

带参数跳转

this.$router.push({ path: '/path', query: { paramName: 'value' } })

上面的代码将会跳转到 /path 路由，并在 URL 中添加查询参数。

返回上一个路由

this.$router.go(-1)

上面的代码将会返回上一个路由。

这些方法可以帮助我们在代码中动态地修改当前的路由。

以上就是获取路由信息的一些常用方法。通过了解这些方法，我们可以更好地处理路由相关的操作，从而构建更强大的 Vue.js 应用程序。

注意：以上代码片段是基于 Vue.js 2.x 版本的语法。如果你使用的是其他版本，请参考相应的文档来获取路由信息。

参考链接：Vue Router 官方文档