在 Vue.js 应用中，获取浏览器 URL 参数是一个非常常见的需求，例如可以根据 URL 参数显示不同的视图或获取特定数据。在本文中，我们将详细介绍如何在 Vue.js 中获取浏览器 URL 参数的方法，并提供一些示例代码以供学习和参考。
方法一：使用 Vue-Router
Vue-Router 是一个 Vue.js 官方提供的路由管理库，它提供了一种解决获取 URL 参数的简单方法。下面是一个简单的使用 Vue-Router 获取 URL 参数的示例代码：
-- -------------------- ---- -------
-- -- ----------
------ --------- ---- ------------
-- -- ------ --
----- ------ - --- -----------
------- -
-
-- ---------- -----
----- ------------
---------- ----
-
-
--
-- --------
------ ------- -
----- -------
--------- -
---------------------------------- -- -- --- ---
-
-在上面的示例代码中，我们使用动态路由 :id 来获取 URL 参数 id 的值，然后在组件的 mounted 钩子函数中使用 this.$route.params.id 来获取参数值。
方法二：使用 Query-String 库
除了使用 Vue-Router，我们还可以通过使用 query-string 库 来获取 URL 参数。query-string 是一个用于解析和序列化 URL 查询参数的 JavaScript 库，它可以将查询字符串解析为一个 JSON 对象，并且可以很方便地获取 URL 参数的值。下面是一个简单的使用 query-string 库获取 URL 参数的示例代码：
-- -------------------- ---- -------
-- -- ------------ -
------ ----------- ---- --------------
-- --------
------ ------- -
----- ----------
--------- -
----- ------ - ------------------------------------ -- -- --- ----
------------------------- -- -- --- ---
-
-在上面的示例代码中，我们首先引入了 query-string 库，并且通过 queryString.parse 方法解析了 URL 查询参数，然后通过 this.$route.query 获取到 URL 的查询参数，最后通过 values.color 来获取参数值。
方法三：手动解析 URL 参数
除了使用第三方库，我们还可以手动解析 URL 参数。下面是一个简单的手动解析 URL 参数的示例代码：
-- -------------------- ---- -------
-- --------
------ ------- -
----- ----------
--------- -
----- --------- - --- --------------------------------------- -- -- --- -----
----- ----- - ---------------------- -- --------
------------------ -- -- --- ---
-
-在上面的示例代码中，我们通过 new URLSearchParams(window.location.search) 获取当前 URL 的查询参数，然后使用 urlParams.get() 方法获取特定的参数值。
总结来说，我们可以使用 Vue-Router 或 query-string 库来获取浏览器 URL 参数，也可以手动解析 URL 参数。无论使用哪种方法，都可以轻松获取 URL 参数，使我们的 Vue.js 应用更加灵活和强大。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a21d4aadd4f0e0ffa2d0ad