Vue 中的路由路径获取指南：从基础到应用

在 Vue 中获取当前路由地址的 7 种方法

获取当前路由地址是 Vue 开发中的必备技能，本文将深入探讨 7 种获取当前路由地址的方法，从基础到高级，让你的 Vue 项目如虎添翼。

1. window.location.href：简单粗暴

最简单的方法莫过于 window.location.href，它返回当前页面的完整 URL，包括协议、域名、端口、路径和查询参数。

const currentUrl = window.location.href;
console.log(currentUrl); // "http://www.example.com:8080/home?name=John"

2. window.location.pathname：获取路径部分

如果只需要获取当前页面的路径，可以使用 window.location.pathname。它只返回协议、域名、端口和路径部分，不包括查询参数和哈希。

const currentPath = window.location.pathname;
console.log(currentPath); // "/home"

3. window.location.search：获取查询参数

查询参数是 URL 中问号 (?) 后面的部分，通常用来传递一些附加信息。你可以使用 window.location.search 获取当前页面的查询参数。

const queryString = window.location.search;
console.log(queryString); // "?name=John"

4. window.location.hash：获取哈希

哈希是 URL 中井号 (#) 后面的部分，通常用来指向页面中的某个特定位置。你可以使用 window.location.hash 获取当前页面的哈希。

const hash = window.location.hash;
console.log(hash); // "#section-2"

5. this.route.path：Vue Router 的 route 对象

在 Vue Router 中，你可以使用 this.$route.path 获取当前路由的路径。它与 window.location.pathname 的区别在于，它只返回路径部分，不包括协议、域名和端口。

const currentPath = this.$route.path;
console.log(currentPath); // "/home"

6. this.$route.query：获取路由查询参数

与 window.location.search 类似，你也可以使用 this.$route.query 获取当前路由的查询参数。它是一个对象，键值对形式存储着查询参数。

const queryParams = this.$route.query;
console.log(queryParams); // { name: "John" }

7. this.$route.hash：获取路由哈希

与 window.location.hash 类似，你也可以使用 this.$route.hash 获取当前路由的哈希。它是一个字符串，存储着哈希部分的内容。

const hash = this.$route.hash;
console.log(hash); // "#section-2"

常见问题解答

1. 如何在组件内获取当前路由？

你可以使用 this.$route 对象获取当前路由。

2. 如何在钩子函数中获取当前路由？

你可以在钩子函数的参数中获取 this.$route 对象。

3. 如何使用 $route.meta 获取路由元信息？

你可以使用 this.$route.meta 获取路由元信息，元信息是一个对象，它可以包含任何自定义数据。

4. 如何在导航时修改路由地址？

你可以使用 this.$router.push() 或 this.$router.replace() 方法修改路由地址。

5. 如何在导航时传递查询参数？

你可以在 this.$router.push() 或 this.$router.replace() 方法中传递查询参数对象。

结论

掌握了这 7 种获取当前路由地址的方法后，你就可以轻松地在 Vue 项目中动态导航和构建单页面应用了。根据你的需要选择最合适的方法，让你的项目更加灵活和高效。