vue中如何接收路由参数,{ path: '/your-path/:id', component: YourComponent }
在 Vue.js 中,你可以使用 $route.params
来访问路由参数。如果你的路由配置是 { path: '/your-path/:id', component: YourComponent }
,那么你可以在 YourComponent
组件中这样获取到 id
参数:
export default {
created() {
let id = this.$route.params.id
console.log(id) // 打印出 id 的值
}
}
如果你正在使用 Vue 3 组合式 API (Composition API),你可以通过在 setup()
函数中使用 useRoute()
钩子来获取路由参数:
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
let id = route.params.id
console.log(id) // 打印出 id 的值
}
}
注意在使用组合式 API 时,因为 setup()
函数执行时机早于生命周期钩子,所以不需要放在 created()
或者 mounted()
等钩子函数中。此外,useRoute
是一个响应式的路由钩子,所以它会及时反映当前路由的状态。