vue动态路由传参的参数值是变量

### 在 Vue3 中通过路由获取 Query 参数 在 Vue3 的项目中，可以通过 `useRoute` 方法从 Composition API 中获取当前的路由实例，并从中提取 Query 参数。以下是具体的实现方法： #### 示例代码 以下是一个完整的示例，展示了如何在组件中获取和监听 Query 参数： ```vue <template> <div> <p>Query Parameter ID: {{ queryId }}</p> <p>Query Parameter Name: {{ queryName }}</p> </div> </template> <script> import { useRoute, onBeforeRouteUpdate } from 'vue-router'; import { ref, watchEffect } from 'vue'; export default { setup() { const route = useRoute(); // 初始化 Query 参数 const queryId = ref(route.query.id || ''); const queryName = ref(route.query.name || ''); // 监听 Query 参数的变化 watchEffect(() => { queryId.value = route.query.id || ''; queryName.value = route.query.name || ''; }); // 处理路由更新事件（可选） onBeforeRouteUpdate((to) => { queryId.value = to.query.id || ''; queryName.value = to.query.name || ''; }); return { queryId, queryName, }; }, }; </script> ``` 以上代码实现了以下几个功能： 1. **初始化 Query 参数**：通过 `route.query` 获取初始的 Query 参数值[^1]。 2. **动态监听参数变化**：利用 `watchEffect` 自动追踪 `route.query` 的变化并实时更新响应式变量[^3]。 3. **处理路由切换时的参数更新**：通过 `onBeforeRouteUpdate` 捕获路由更新事件，确保在路由切换时能够同步最新的 Query 参数[^4]。 --- ### 类型标注（可选） 为了进一步提升代码的质量和可维护性，建议为 Query 参数添加类型标注。以下是基于 TypeScript 的实现方式： #### 添加类型定义 ```typescript // 定义 Query 参数的类型 interface RouteQueryParams { id?: string; name?: string; } ``` #### 修改代码以支持类型安全 ```vue <script lang="ts"> import { defineComponent, ref, watchEffect } from 'vue'; import { useRoute, RouteLocationNormalizedLoaded } from 'vue-router'; export default defineComponent({ setup() { const route = useRoute(); // 使用类型断言指定 Query 参数的类型 const queryParams = route.query as unknown as RouteQueryParams; const queryId = ref(queryParams.id ?? ''); const queryName = ref(queryParams.name ?? ''); watchEffect(() => { const updatedQueryParams = route.query as unknown as RouteQueryParams; queryId.value = updatedQueryParams.id ?? ''; queryName.value = updatedQueryParams.name ?? ''; }); return { queryId, queryName, }; }, }); </script> ``` 此部分代码引入了 TypeScript 的接口定义，明确了 Query 参数的结构，从而增强了代码的安全性和可读性[^4]。 --- ### 总结 通过上述方法，可以在 Vue3 中轻松获取和监听路由的 Query 参数。无论是简单的场景还是复杂的类型化需求，都可以找到合适的解决方案。 ---

### Vue3 中通过路由传递参数的方法 #### Params 动态路由传参 动态路由匹配允许在路径中定义可变部分，这些变量被称为 URL 参数 (params)。当访问特定页面时可以携带额外的信息。 为了设置带有 params 的路由，在配置文件中的 path 字段里加入冒号前缀来表示占位符： ```javascript const routes = [ { path: '/user/:id', name: 'UserDetail', component: UserComponent, }, ]; ``` 上述例子展示了如何创建一个接收 id 参数的用户详情页路由[^1]。 在组件内部获取该参数的方式如下所示： ```javascript import { useRoute } from 'vue-router'; export default { setup() { const route = useRoute(); console.log(route.params.id); // 输出当前用户的 ID return {}; } } ``` 对于导航到带参数的目标地址，则可以通过编程式导航完成： ```javascript this.$router.push({ name: 'UserDetail', params: { id: userId } }); // 或者使用字符串形式 this.$router.push(`/user/${userId}`); ``` 需要注意的是，如果采用对象的形式指定目标位置并包含 params 属性的话，就不能再用完整的路径作为 destination；反之亦然。 #### Query 方式的参数传递 另一种常见的场景是在不改变视图的情况下附加查询条件给现有链接，这时就可以利用 query 来实现。这种方式类似于 GET 请求中的键值对形式。 基本语法如下： ```javascript { path: '/', name: 'Home' } // 导航至 /?name=John&age=20 this.$router.push({ name: 'Home', query: { name: 'John', age: 20 } }); // 获取查询参数 console.log(this.$route.query.name); // John console.log(this.$route.query.age); // 20 ``` 此方法适用于那些不需要影响浏览器历史记录或希望保持原有视图结构不变的情况[^2]。