如何将冒号(:)与vue路由器一起使用

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

const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true // 允许将路由参数作为props传递给组件
  }
];

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

export default router;

<template>
  <div>
    User ID: {{ id }}
  </div>
</template>

<script>
export default {
  props: ['id'],
  mounted() {
    console.log(this.id); // 输出当前路由参数中的id值
  }
};
</script>

<template>
  <div>
    Search Query: {{ query }}
  </div>
</template>

<script>
export default {
  computed: {
    query() {
      return this.$route.query.q;
    }
  }
};
</script>

export default {
  watch: {
    '$route'(to, from) {
      // 当路由变化时执行操作
      this.fetchData(to.params.id);
    }
  },
  methods: {
    fetchData(id) {
      // 根据id获取数据
    }
  }
};