vue3 页面跳转传参

<think>我们正在讨论Vue3中通过路由进行页面跳转并传递参数的方法。根据引用内容，我们可以总结出几种常见的方式： 1. 通过params传递参数（需要提前在路由规则中定义，或者使用命名路由） 2. 通过query传递参数（会显示在URL的查询字符串中） 注意：在Vue Router中，params和query是两种不同的传参方式。 具体步骤： 1. 在路由规则中定义参数（如果需要使用params） 2. 在源页面使用`router.push`进行跳转并传递参数 3. 在目标页面获取参数 下面分别说明： 方法一：使用params传参（适合传递不会在URL中直接显示的参数，但注意：如果使用path跳转，params会被忽略） 示例代码（源页面）： ```javascript import { useRouter } from 'vue-router' export default { setup() { const router = useRouter() function goToProductUpdate(id) { // 使用命名路由，并传递params router.push({ name: 'product_update', // 注意：这里使用name，不能使用path，因为params需要和命名路由一起使用 params: { id: id } }) } return { goToProductUpdate } } } ``` 在路由规则中，我们需要为这个路由命名，并且定义参数（例如，在router/index.js中）： ```javascript const routes = [ // ...其他路由 { path: '/product/update/:id?', // 这里:id表示参数，?表示可选 name: 'product_update', component: () => import('@/views/ProductUpdate.vue') } ] ``` 在目标页面（ProductUpdate.vue）中获取参数： ```javascript import { useRoute } from 'vue-router' import { onMounted } from 'vue' export default { setup() { const route = useRoute() // 通过route.params获取参数 const id = route.params.id onMounted(() => { console.log('接收到的参数id:', id) }) return { id } } } ``` 方法二：使用query传参（参数会显示在URL中，例如：/product/update?id=123） 示例代码（源页面）： ```javascript router.push({ path: '/product/update', // 也可以使用name: 'product_update'，但注意此时path中不需要写参数 query: { id: id } }) ``` 在目标页面获取query参数： ```javascript const route = useRoute() const id = route.query.id ``` 方法三：通过router-link标签传递参数（较少使用，因为通常我们通过方法触发跳转） 示例： ```html <router-link :to="{ name: 'product_update', params: { id: 123 } }">更新产品</router-link> 或 <router-link :to="{ path: '/product/update', query: { id: 123 } }">更新产品</router-link> ``` 注意事项： - 使用params传参时，如果路由规则中参数是可选的（即使用了?），那么传递参数时可能不会显示在URL中，但刷新页面后参数会丢失（因为params参数不会持久化到URL中，除非你已经在路由规则中定义）。因此，对于需要刷新页面后仍然保留的参数，建议使用query传参，或者将参数作为路径的一部分（即定义在path中）。 - 在Vue3中，使用组合式API（setup）时，我们使用`useRouter()`获取路由实例（用于跳转），使用`useRoute()`获取当前路由信息（用于获取参数）。 总结： 1. 需要隐藏参数且不希望参数出现在URL中，可以使用params，但注意刷新页面会丢失（除非使用其他方式持久化，如本地存储）。 2. 需要参数在URL中可见，以便分享或刷新后仍然存在，使用query。 根据引用[3]中的示例，我们也可以混合使用params和query，但通常不建议，因为容易混淆。 因此，在Vue3中，通过路由跳转传递参数主要使用`router.push`方法，并传入一个对象，对象中可以包含`name`（或`path`）、`params`或`query`。 下面是一个完整的示例： 步骤1：定义路由（router/index.js） ```javascript import { createRouter, createWebHistory } from 'vue-router' const routes = [ // ...其他路由 { path: '/product/update/:id', name: 'product_update', component: () => import('../views/ProductUpdate.vue') }, { path: '/product/detail', name: 'product_detail', component: () => import('../views/ProductDetail.vue') } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 步骤2：在源页面传递参数 示例1：使用params（需要匹配路由中的参数） ```javascript // 跳转到/product/update/123 router.push({ name: 'product_update', params: { id: 123 } }) // 或者使用path（需要完整路径并包含参数） // router.push({ path: `/product/update/${123}` }) ``` 示例2：使用query（跳转到/product/detail?id=123） ```javascript router.push({ name: 'product_detail', query: { id: 123 } }) // 或者 // router.push({ path: '/product/detail', query: { id: 123 } }) ``` 步骤3：在目标页面获取参数 对于params参数： ```javascript const route = useRoute() const id = route.params.id // 注意：这里id是字符串，如果需要数字，可以转换 ``` 对于query参数： ```javascript const route = useRoute() const id = route.query.id ``` 这样，我们就实现了在Vue3中页面跳转并传递参数的功能。 §§相关问题§§ 1. Vue3中路由参数传递有哪几种方式？它们有什么区别？ 2. 在Vue3中，如何获取路由传递过来的参数？ 3. 使用params传参时，为什么有时候刷新页面参数会丢失？如何解决？ 4. 在Vue3中，如何通过编程式导航实现页面跳转并传递参数？ 5. 路由跳转时，params和query可以同时使用吗？会有什么问题？</think>在 Vue 3 中，通过 Vue Router 实现页面跳转并传递参数主要有两种方式：**params 传参**和**query 传参**。以下是具体实现方法： --- ### 🛣️ 一、params 传参（参数在 URL 路径中） **特点**：参数在 URL 中显示为路径的一部分（如 `/user/123`），需提前在路由规则中定义参数名。 #### 1. 定义路由规则（router/index.js） ```javascript const routes = [ { path: '/user/:id', // 定义参数 :id name: 'userDetail', // 命名路由（推荐） component: () => import('@/views/UserDetail.vue') } ]; ``` #### 2. 源页面跳转并传参 ```javascript import { useRouter } from 'vue-router'; // 方法1：通过命名路由 + params router.push({ name: 'userDetail', // 使用路由名称 params: { id: 123 } // 传递参数 }); // 方法2：直接写路径（不推荐，易出错） router.push(`/user/${123}`); ``` #### 3. 目标页面接收参数 ```javascript import { useRoute } from 'vue-router'; const route = useRoute(); const userId = route.params.id; // 获取参数 → 123 ``` --- ### 🔍 二、query 传参（参数在 URL 查询字符串中） **特点**：参数在 URL 中以 `?key=value` 形式显示（如 `/user?id=123`），无需提前定义路由参数。 #### 1. 源页面跳转并传参 ```javascript // 方法1：通过 path + query router.push({ path: '/user', query: { id: 123, name: 'John' } // 传递多个参数 }); // 方法2：通过命名路由 + query router.push({ name: 'userDetail', query: { id: 123 } }); ``` #### 2. 目标页面接收参数 ```javascript const route = useRoute(); const userId = route.query.id; // → "123" const userName = route.query.name; // → "John" ``` --- ### 📌 关键区别与注意事项 | **特性** | **params** | **query** | |----------------|--------------------------------|--------------------------------| | **URL 显示** | `/user/123` | `/user?id=123` | | **路由定义** | 需提前声明（如 `path: '/user/:id'`） | 无需声明 | | **参数获取** | `route.params.id` | `route.query.id` | | **刷新页面** | 参数保留 | 参数保留 | | **适用场景** | 必传参数（如资源ID） | 可选参数（如搜索条件） | #### ⚠️ 重要提醒： 1. **params 必须使用 `name` 跳转**： 若使用 `path` 跳转（如 `router.push({ path: '/user', params: { id: 123 } })`），params 参数会失效！ 2. **参数类型**： `route.params` 和 `route.query` 返回的值均为**字符串**，需自行转换类型（如 `Number(id)`）。 --- ### 🌰 完整示例 #### 源页面（跳转逻辑） ```vue <script setup> import { useRouter } from 'vue-router'; const router = useRouter(); // params 传参跳转 const goWithParams = () => { router.push({ name: 'userDetail', params: { id: 456 } }); }; // query 传参跳转 const goWithQuery = () => { router.push({ path: '/user', query: { id: 789, from: 'home' } }); }; </script> ``` #### 目标页面（接收参数） ```vue <script setup> import { useRoute } from 'vue-router'; const route = useRoute(); // 接收 params 参数 const paramsId = route.params.id; // 接收 query 参数 const queryId = route.query.id; const fromPage = route.query.from; </script> ``` --- ### 📚 官方参考 - [Vue Router 编程式导航](https://next.router.vuejs.org/guide/essentials/navigation.html) - [路由传参文档](https://next.router.vuejs.org/guide/essentials/passing-props.html) 通过合理选择 `params` 或 `query`，即可灵活实现 Vue 3 中的页面跳转传参需求。