vite path: '/commonHeb/:id', 页面接收id
时间: 2024-09-25 22:13:11 浏览: 28
在Vite项目中,如果你有一个这样的路由配置:
```javascript
// vite.config.ts 或者 vite-router相关的配置文件
export default defineRoutes([
{
path: '/commonHeb/:id', // 定义了一个动态路由,其中 ':id' 是动态参数
component: () => import('./views/CommonHebrew.vue'), // 导入对应的页面组件
},
]);
```
这里的`/commonHeb/:id`表示访问路径为`/commonHeb`后面跟着一个id参数。在`CommonHebrew.vue`页面中,你可以使用Vue的内置属性或插件来接收这个id参数。假设你正在使用Vue Router的插件`vue-router-query`来管理查询参数,你可以这样做:
```vue
<template>
<div>
<h1>Common Hebrew Page</h1>
<p>ID: {{ $route.query.id }}</p> // 查询参数会被自动解析到$route.query对象中
</div>
</template>
<script>
import { useRouter } from 'vue-router-query';
export default {
setup() {
const router = useRouter();
const id = router.query.id; // 获取id参数
return {
id,
};
},
};
</script>
```
如果使用的是Vue Router本身提供的`useRoute`或`$route`属性,那么参数会在组件的生命周期钩子如`setup`或`beforeCreate`中可用。