使用vue3编程方法完成 路由跳转传Param参数 路由跳转传qurey参数 路由跳转使用Props选项传参 路由跳转使用meta选项传参 写出完整代码实现上述要求

在 Vue3 中，我们可以使用 `router` 对象来进行路由跳转，并通过不同的方式传递参数：

1. **Query参数**（URL查询字符串）

import { useRouter } from 'vue-router';

// 在组件内部
export default {
  setup() {
    const router = useRouter();
    
    // 跳转到新的页面并带参数
    const handleClick = (param) => {
      router.push({
        name: 'yourRouteName', // 替换为实际的路由名称
        query: { key: param }, // 参数名及值
      });
    };

    return {
      handleClick,
    };
  },
};

在模板中调用这个方法：

<button @click="handleClick('yourValue')">跳转并传参数</button>

2. **Props选项**（父子组件间数据传递）

// 父组件
<template>
  <router-link :to="{ path: 'yourRouteName', params: { paramKey: 'yourValue' }}" />
</template>

// 子组件接收props
<script>
export default {
  props: ['param'],
};
</script>

3. **Meta选项**（自定义元信息，主要用于导航守卫等场景）

// 配置路由
const routes = [
  {
    path: '/yourRoute',
    component: YourComponent,
    meta: {
      // 如果需要在跳转前做处理，可以在这里设置
      propKey: 'yourValue',
    },
  },
];

// 路由守卫（如全局前置守卫 beforeEach）
router.beforeEach((to, from, next) => {
  if (to.meta.propKey === 'yourValue') {
    // 执行特定操作
  }
  next();
});

以上代码示例只展示了基本的用法，实际应用中可能需要配合Vuex管理状态、Vue Router的生命周期钩子等其他功能。