如何让角路由路径'post/:id‘和'post/create’共存？

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

const routes = [
  {
    path: '/post/:id(\\d+)', // 只匹配数字ID
    component: Post,
    props: (route) => ({ id: route.params.id })
  },
  {
    path: '/post/create',
    component: Post,
    props: () => ({ id: null }) // 或者你可以传递一个特定的标识符
  }
];

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

export default router;

<template>
  <div>
    <h1>Post</h1>
    <div v-if="id">
      <!-- 显示文章详情 -->
      <p>Details for post with ID: {{ id }}</p>
    </div>
    <div v-else>
      <!-- 显示创建文章的表单 -->
      <form @submit.prevent="createPost">
        <!-- 表单内容 -->
      </form>
    </div>
  </div>
</template>

<script>
export default {
  props: ['id'],
  methods: {
    createPost() {
      // 创建文章的逻辑
    }
  }
};
</script>