在Vue.js应用程序中，可以使用查询参数来传递可选的参数。查询参数是附加在URL末尾的键值对，它们以问号（?）开始，并用&符号分隔。
例如： https://example.com/search?q=vue.js&page=2
在这个URL中，q 和 page 是查询参数的键，它们的值分别是 "vue.js" 和 "2"。
在Vue.js中获取查询参数
你可以使用this.$route.query对象来访问当前路由的所有查询参数。例如，如果有一个路由定义如下：
const routes = [
{ path: '/search', component: SearchResults }
]可以通过以下方式获取查询参数：
// SearchResults.vue
export default {
mounted() {
console.log(this.$route.query.q) // 输出 "vue.js"
console.log(this.$route.query.page) // 输出 "2"
}
}如果没有提供特定的查询参数，则相应的属性将是 undefined。
动态路由
如果你使用动态路由，比如以下的示例：
const routes = [
{ path: '/search/:query', component: SearchResults }
]你可以使用 $route.params 来获取动态部分和 $route.query 来获取查询参数：
// SearchResults.vue
export default {
mounted() {
console.log(this.$route.params.query) // 输出 "vue.js"
console.log(this.$route.query.page) // 输出 "2"
}
}在Vue.js中设置查询参数
你可以使用 this.$router.push 方法来设置查询参数。以下示例演示如何将新的查询参数添加到当前URL：
-- -------------------- ---- -------
-- -----------------
------ ------- -
-------- -
---------- -
----- ----------- - ----------------------------- -- --
------------------- ------ - ----- ----------- - - ---
-
-
-在这个示例中，我们首先获取当前页面的页码（如果未提供，则默认为1）。然后，我们使用 $router.push 方法来添加一个新的 page 查询参数，并将它的值设置为当前页码加1。
在Vue.js中删除查询参数
你可以使用 this.$router.push 方法并指定一个没有要删除的查询参数的对象来删除单个或多个查询参数。以下示例演示如何从当前URL中删除 page 查询参数：
-- -------------------- ---- -------
-- -----------------
------ ------- -
-------- -
----------- -
------------------- ------ - -- ------------------- ---
-
-
-在这个示例中，我们用 $router.push 方法调用了一个只包含 q 查询参数的对象，因此删除了 page 查询参数。
结论
在Vue.js应用程序中使用查询参数是一种方便传递可选参数的方式。我们可以使用 $route.query 来访问当前路由的所有查询参数，并使用 $router.push 方法来设置和删除查询参数。
希望这篇文章能够帮助你更好地理解Vue.js中的查询参数。如果你想了解更多关于Vue.js的相关知识，请查看官方文档：https://vuejs.org/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26313