在vue3+ts项目里使用query和params传参

在Vue 3 + TypeScript 项目中，你可以使用 vue-router 来传递参数。query 用于传递可选的查询参数，而 params 通常用于传递必须的路由参数，这取决于你的路由配置。

以下是如何使用 query 和 params 的例子：

首先，确保你已经安装并设置了 vue-router。

1. 定义路由：

// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('@/components/User.vue'),
  },
  // 其他路由...
];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
 
export default router;

2. 使用 query 传参：

// 在组件中
import { useRouter } from 'vue-router';
 
export default defineComponent({
  setup() {
    const router = useRouter();
 
    function goToUserPage() {
      router.push({ name: 'User', query: { plan: 'premium' } });
    }
 
    return { goToUserPage };
  },
});

3. 使用 params 传参：

// 在组件中
import { useRouter } from 'vue-router';
 
export default defineComponent({
  setup() {
    const router = useRouter();
 
    function goToUserPage() {
      router.push({ name: 'User', params: { id: '1234' } });
    }
 
    return { goToUserPage };
  },
});

注意：当使用 params 时，你需要在路由定义中指定参数的占位符（例如 /user/:id），这样才能在路由正确地使用它。使用 query 不需要在路由中预定义参数。