The problem of not getting params value when transferring the value on vue3 page is solved.

In Vue 3, there are usually two ways to pass parameters when a page jumps: through routing parameters (params) and through query strings (query). If you encounter the problem that you cannot get params value when using Vue Router, you can troubleshoot and solve it according to the following aspects:

1. Confirm the routing configuration

First, confirm whether your routing configuration is correct. When passing parameters in params, you need to specify dynamic path segments in the route definition.

import { createRouter, createWebHistory } from 'vue-router';
import YourComponent from './';

const routes = [
  {
    path: '/yourpath/:param1/:param2',
    name: 'YourComponent',
    component: YourComponent
  },
  // Other routes...];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

2. Pass parameters during jump

When jumping to the target route, make sure you pass the params parameter correctly.

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

Or use the full path:

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

3. Receive params values

In the target component, you can receive params values ​​through props or route in setup.

3.1 Using props

If your component is rendered via <router-view> and you want to use props to receive parameters in the <script> section, then you need to declare these props in the component:

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

This method requires the use of <component :is="$"></component> in the routing configuration to render the component, and define the corresponding props name in the component.

3.2 Using the Composition API

If you are using the Composition API (setup function), you can access useRoute() directly to get the routing parameters:

import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    const param1 = ref(.param1);
    const param2 = ref(.param2);

    onMounted(() => {
      (, );
    });

    return {
      param1,
      param2
    };
  }
}

4. Check routing changes

If your component needs to update params when routing changes, then you can listen for changes in $route:

import { watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const param1 = ref(.param1);
    const param2 = ref(.param2);

    watch(route, (newRoute) => {
       = .param1;
       = .param2;
    }, { immediate: true });

    return {
      param1,
      param2
    };
  }
}

5. Debugging and Verification

If you still cannot get params, please check the following points:

• Make sure your routing configuration is correct.
• Make sure the correct parameters are passed during jump.
• Check the console for any error prompts.
• Make sure that the URL address bar contains the correct parameters when accessing the page.

This is the article about solving the problem of not getting params value when jumping to pass values ​​on vue3 page. This is the end. For more related content related to vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!