提示信息

vue中如何接收路由参数,{ path: '/your-path/:id', component: YourComponent }

天空依然阴暗 已关注

在 Vue.js 中,你可以使用 $route.params 来访问路由参数。如果你的路由配置是 { path: '/your-path/:id', component: YourComponent },那么你可以在 YourComponent 组件中这样获取到 id 参数:

  1. export default {
  2. created() {
  3. let id = this.$route.params.id
  4. console.log(id) // 打印出 id 的值
  5. }
  6. }

如果你正在使用 Vue 3 组合式 API (Composition API),你可以通过在 setup() 函数中使用 useRoute() 钩子来获取路由参数:

  1. import { useRoute } from 'vue-router'
  2. export default {
  3. setup() {
  4. const route = useRoute()
  5. let id = route.params.id
  6. console.log(id) // 打印出 id 的值
  7. }
  8. }

注意在使用组合式 API 时,因为 setup() 函数执行时机早于生命周期钩子,所以不需要放在 created() 或者 mounted() 等钩子函数中。此外,useRoute 是一个响应式的路由钩子,所以它会及时反映当前路由的状态。

    遇到难题? "AI大模型GPT4.0、GPT" 是你的私人解答专家! 点击按钮去提问......
天空依然阴暗 关注 已关注

最近一次登录:2023-12-26 11:54:43   

暂时还没有签名,请关注我或评论我的文章
×
免费图表工具,画流程图、架构图