vue3页面跳转传值时获取不到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;

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

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

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

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
    };
  }
}

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
    };
  }
}