怎么定义动态路由?怎么获取传过来的动态参数?
VueJs 261
怎么定义动态路由?怎么获取传过来的动态参数?
API题⽬,考查基础能⼒,不容有失,尽可能说的详细。
思路
- 什么是动态路由
- 什么时候使⽤动态路由,怎么定义动态路由
- 参数如何获取
- 细节、注意事项
回答范例
- 很多时候,我们需要将给定匹配模式的路由映射到同⼀个组件,这种情况就需要定义动态路由。
- 例如,我们可能有⼀个 User 组件,它应该对所有⽤户进⾏渲染,但⽤户 ID 不同。在 Vue Router 中,我们可以在路径中使⽤⼀个动态字段来实现,例如: { path: ‘/users/:id’, component: User } ,其中:id 就是路径参数
- 路径参数 ⽤冒号 : 表示。当⼀个路由被匹配时,它的 params 的值将在每个组件中以
this.$route.params 的形式暴露出来。 - 参数还可以有多个,例如 /users/:username/posts/:postId ;除了route.params之外,route 对
象还公开了其他有⽤的信息,如route.query、route.hash 等。