vue3在路由里取参数几种常见的方法

export default {
  mounted() {
    // 获取动态路由参数
    const id = this.$route.params.id;
    console.log('Route Param:', id);

    // 获取查询参数
    const queryParam = this.$route.query.someQueryParam;
    console.log('Query Param:', queryParam);
  }
};

import { useRoute } from 'vue-router';

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

    // 获取动态路由参数
    const id = route.params.id;
    console.log('Route Param:', id);

    // 获取查询参数
    const queryParam = route.query.someQueryParam;
    console.log('Query Param:', queryParam);

    return { id, queryParam };
  }
};

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

export default {
  setup() {
    const route = useRoute();
    const id = ref(route.params.id);

    // 监听路由参数变化
    watch(
      () => route.params.id,
      (newId) => {
        id.value = newId;
        console.log('Updated Route Param:', newId);
      }
    );

    return { id };
  }
};

const routes = [
  {
    path: '/user/:id',
    component: UserComponent
  }
];

<template>
  <div>
    <p>User ID: {{ id }}</p>
    <p>Query Param: {{ queryParam }}</p>
  </div>
</template>

<script>
import { useRoute, watch } from 'vue-router';
import { ref } from 'vue';

export default {
  setup() {
    const route = useRoute();
    const id = ref(route.params.id);
    const queryParam = ref(route.query.name);

    // 监听路由参数变化
    watch(
      () => route.params.id,
      (newId) => {
        id.value = newId;
      }
    );

    // 监听查询参数变化
    watch(
      () => route.query.name,
      (newName) => {
        queryParam.value = newName;
      }
    );

    return { id, queryParam };
  }
};
</script>