vue获取当前路由

Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面。它通过使用组件化的方式，可以更好地组织和管理代码。在 Vue.js 中，我们可以使用 vue-router 插件来实现路由功能。

在 Vue.js 中，我们可以使用 `$route` 对象来获取当前的路由信息。`$route` 对象包含了当前路由的相关信息，例如当前路径、参数、查询等。我们可以利用这些信息来动态展示不同的内容。

要获取当前路由的路径，我们可以使用 `$route.path`。这个属性会返回当前路由的路径字符串，例如 `/home`。如果路由带有参数，我们可以通过 `$route.params` 来获取参数，例如 `/users/:id` 中的 `id`。

要获取当前路由的查询参数，我们可以使用 `$route.query`。这个属性会返回一个包含所有查询参数的对象。例如，对于路径 `/search?keyword=vue`，`$route.query` 将返回一个对象 `{ keyword: vue }`。

除了上述属性外，`$route` 对象还包含其他常用的属性，例如 `$route.name` 表示当前路由的名称，`$route.meta` 表示当前路由的元信息等。

在 Vue 组件中，我们可以通过访问 `this.$route` 来获取当前路由的信息。例如，在组件的生命周期函数中，我们可以通过 `mounted` 钩子来获取当前的路由路径：

```

mounted() {

console.log(this.$route.path);

}

```

此外，我们还可以通过在模板中绑定 `$route` 对象来动态显示当前路由的信息。例如，我们可以在模板中使用插值绑定来展示当前路由的路径：

```

当前路径：{{ $route.path }}

```

这样，当路由发生变化时，模板中的内容也会自动更新。

总结起来，Vue.js 中可以使用 `$route` 对象来获取当前的路由信息。通过访问 `$route.path`、`$route.params`、`$route.query` 等属性，我们可以动态获取当前路由的路径、参数、查询等信息。这样，我们就可以根据当前路由的不同展示不同的内容。