Skip to content

Commit 24717cf

Browse files
committed
update: 44题动态路由
1 parent ce29254 commit 24717cf

File tree

2 files changed

+35
-0
lines changed

2 files changed

+35
-0
lines changed

README.md

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
41. [实际工作中,你总结的vue最佳实践有哪些?](public/40-create-vue-proj/README.md)
5454
42. [Vue实例挂载的过程中发生了什么?](public/42-instance-mount/README.md)
5555
43. [vue-loader是什么?它有什么作用?](public/43-vue-loader/README.md)
56+
44. [如何获取动态路由并获取其参数?](public/44-dynamic-route/README.md)
5657

5758
### 欢迎把你想听的题目以issue的方式提给我
5859
### 欢迎你加入村长的项目已pr形式提交题目和解答

public/44-dynamic-route/README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
## 12 - 怎么定义动态路由?怎么获取传过来的动态参数?
2+
3+
### 分析
4+
5+
API题目,考查基础能力,不容有失,尽可能说的详细。
6+
7+
8+
### 思路
9+
10+
1. 什么是动态路由
11+
2. 什么时候使用动态路由,怎么定义动态路由
12+
3. 参数如何获取
13+
4. 细节、注意事项
14+
15+
---
16+
17+
### 回答范例
18+
19+
1. 很多时候,我们需要**将给定匹配模式的路由映射到同一个组件**,这种情况就需要定义动态路由。
20+
2. 例如,我们可能有一个 `User` 组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,例如:`{ path: '/users/:id', component: User }`,其中`:id`就是路径参数
21+
3. *路径参数* 用冒号 `:` 表示。当一个路由被匹配时,它的 *params* 的值将在每个组件中以 `this.$route.params` 的形式暴露出来。
22+
4. 参数还可以有多个,例如`/users/:username/posts/:postId`;除了 `$route.params` 之外,`$route` 对象还公开了其他有用的信息,如 `$route.query``$route.hash` 等。
23+
24+
---
25+
26+
### 可能的追问
27+
28+
1. 如何响应动态路由参数的变化
29+
30+
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96
31+
32+
2. 我们如何处理404 Not Found路由
33+
34+
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E8%B7%AF%E7%94%B1%E6%88%96-404-not-found-%E8%B7%AF%E7%94%B1

0 commit comments

Comments
 (0)