vue3页面跳转传值时获取不到params值的问题解决

在Vue3页面跳转时传递和获取参数通常通过路由参数和查询字符串实现,本文主要介绍了vue3页面跳转传值时获取不到params值的问题解决,感兴趣的可以了解一下

1. 确认路由配置

首先确认你的路由配置是否正确。在 params 中传递参数时，你需要在路由定义中指定动态路径段。

import { createRouter, createWebHistory } from 'vue-router';import YourComponent from './YourComponent.vue';const routes = [  {    path: '/yourpath/:param1/:param2',    name: 'YourComponent',    component: YourComponent  },  // 其他路由...];const router = createRouter({  history: createWebHistory(),  routes});export default router;

2. 跳转时传递参数

在跳转到目标路由时，确保你正确地传递了 params 参数。

this.$router.push({ name: 'YourComponent', params: { param1: 'value1', param2: 'value2' } });

或者使用完整的路径：

this.$router.push('/yourpath/value1/value2');

3. 接收 params 值

在目标组件中，你可以通过 props 或者 setup 中的 route 来接收 params 值。

3.1 使用 props

如果你的组件是通过 <router-view> 渲染的，并且你想在 <script> 部分使用 props 来接收参数，那么你需要在组件中声明这些 props：

export default {  props: ['param1', 'param2'],  created() {    console.log(this.param1, this.param2);  }}

这种方式需要在路由配置中使用 <component :is="$route.name"></component> 来渲染组件，并且在组件中定义对应的 props 名称。

3.2 使用 Composition API

如果你使用的是 Composition API (setup 函数)，你可以直接访问 useRoute() 来获取路由参数：

import { onMounted, ref } from 'vue';import { useRoute } from 'vue-router';export default {  setup() {    const route = useRoute();    const param1 = ref(route.params.param1);    const param2 = ref(route.params.param2);    onMounted(() => {      console.log(param1.value, param2.value);    });    return {      param1,      param2    };  }}

4. 检查路由变化

如果你的组件在路由变化时需要更新 params，那么你可以监听 $route 的变化：

import { watch } from 'vue';import { useRoute } from 'vue-router';export default {  setup() {    const route = useRoute();    const param1 = ref(route.params.param1);    const param2 = ref(route.params.param2);    watch(route, (newRoute) => {      param1.value = newRoute.params.param1;      param2.value = newRoute.params.param2;    }, { immediate: true });    return {      param1,      param2    };  }}