当前位置：首页 > news >正文

【Vue3进阶】玩转query传参，让路由管理更轻松

news 2024/11/17 7:43:34

Hey小伙伴们，今天给大家带来的是Vue3中的一种非常实用的功能——使用query参数进行路由传参。这对于构建动态内容的网页应用来说，简直是太棒了！跟着我一起学习，让我们的项目变得更加灵活高效吧！👩‍💻✨

📚 什么是query传参？

在Vue Router中，query参数是在URL的查询字符串中传递的参数。当我们想要在页面跳转时传递一些临时性的数据，比如用户ID、搜索关键字等，就可以使用这种方式。

💡 为什么使用query传参？

相比params传参，query传参的好处是不会影响到路由匹配规则，因此它非常适合传递那些不需要参与到路径匹配中的参数。另外，即使刷新页面，这些参数依然会被保留在URL中，这对于用户体验来说是个大大的加分项！

📝 如何使用query传参？

下面通过一个简单的案例来展示如何在Vue3项目中使用query传参。

1. 创建Vue项目

首先，创建一个新的Vue3项目：

npm install -g @vue/cli
vue create query-param-example
cd query-param-example

2. 安装Vue Router

接着，安装Vue Router：

npm install vue-router@4

3. 配置路由

在src/router/index.js中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Detail from '../views/Detail.vue'const routes = [{ path: '/', component: Home },{ path: '/detail', component: Detail }
]const router = createRouter({history: createWebHistory(),routes
})export default router

4. 传递参数

现在，在Home组件中添加一个按钮，点击后跳转到Detail组件，并传递一个query参数：

<template><div><h1>主页</h1><button @click="goToDetail">查看详情</button></div>
</template><script>
export default {methods: {goToDetail() {this.$router.push({ path: '/detail', query: { id: '123' } })}}
}
</script>

5. 接收参数

接下来，在Detail组件中接收并显示传递过来的参数：

<template><div><h1>详情页</h1><p>传递的ID: {{ detailId }}</p></div>
</template><script>
import { useRoute } from 'vue-router'export default {setup() {const route = useRoute();const detailId = route.query.id;return { detailId };}
}
</script>