diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/10.\345\220\216\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/config.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/10.\345\220\216\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/config.json" deleted file mode 100644 index dc70abc14fbbbdc8516b34c34b7afdc416631ddb..0000000000000000000000000000000000000000 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/10.\345\220\216\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/config.json" +++ /dev/null @@ -1,10 +0,0 @@ -{ - "node_id": "vue-c6f3a75adadc4901a88a307fb1ee2f07", - "keywords": [], - "children": [], - "export": [ - "exercises.json" - ], - "keywords_must": [], - "keywords_forbid": [] -} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/3.\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/3.\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252/exercises.json" index 655e5e7dd3c8bb349390ed3c43a78b5bb72c17f5..c839c4b83c61e73ad02481e2d923ee8ee5f8e00d 100644 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/3.\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252/exercises.json" +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/3.\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "0b9df39086d141fc992abfcfa2ace8fc" diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.router-link\347\273\204\344\273\266\347\232\204\344\275\277\347\224\250/config.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.router-link\347\273\204\344\273\266\347\232\204\344\275\277\347\224\250/config.json" deleted file mode 100644 index 46972d883ada860b1a71f09068e024e5d94df8f2..0000000000000000000000000000000000000000 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.router-link\347\273\204\344\273\266\347\232\204\344\275\277\347\224\250/config.json" +++ /dev/null @@ -1,10 +0,0 @@ -{ - "node_id": "vue-9e9a0c24d86044d48b8e9c8220b8e112", - "keywords": [], - "children": [], - "export": [ - "exercises.json" - ], - "keywords_must": [], - "keywords_forbid": [] -} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/5.\345\212\250\346\200\201\350\267\257\347\224\261/config.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/config.json" similarity index 64% rename from "data/2.Vue\344\270\255\351\230\266/2.Vue-router/5.\345\212\250\346\200\201\350\267\257\347\224\261/config.json" rename to "data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/config.json" index 75d678a46aabafd44d2ae26214f3844084ca507e..d723b79271c4fc1e121a80b5ce6edcef2abfac6a 100644 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/5.\345\212\250\346\200\201\350\267\257\347\224\261/config.json" +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/config.json" @@ -1,10 +1,14 @@ { "node_id": "vue-0e8b0f72e699442f8008a8ba78b9a05e", - "keywords": [], + "keywords": [ + "动态路由" + ], "children": [], "export": [ "exercises.json" ], - "keywords_must": [], + "keywords_must": [ + "Vue" + ], "keywords_forbid": [] } \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.json" new file mode 100644 index 0000000000000000000000000000000000000000..8866a84f3be179957e2728703b69bff082f71d22 --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.json" @@ -0,0 +1,7 @@ +{ + "type": "code_options", + "author": null, + "source": "exercises.md", + "notebook_enable": false, + "exercise_id": "50eb995df9b24f2b8387df3b055e49f7" +} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.md" new file mode 100644 index 0000000000000000000000000000000000000000..1f4250406cd5bf4c1fb0938f457bf7533ef2e0eb --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.md" @@ -0,0 +1,130 @@ +# 动态路由 + +
小常识：
+
+ +**动态路由** +对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序。 + +**添加路由** +动态路由主要通过两个函数实现。`router.addRoute() 和 router.removeRoute()`。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 `router.push() 或 router.replace()` 来手动导航，才能显示该新路由。我们来看一个例子： + +想象一下，只有一个路由的以下路由： + +```javascript +const router = createRouter({ + history: createWebHistory(), + routes: [{ path: '/:articleName', component: Article }], +}) +``` + +进入任何页面，`/about，/store`，或者 `/3-tricks-to-improve-your-routing-code` 最终都会呈现 Article 组件。如果我们在 /about 上添加一个新的路由： + +```javascript +router.addRoute({ path: '/about', component: About }) +``` + +页面仍然会显示 Article 组件，我们需要手动调用 `router.replace()` 来改变当前的位置，并覆盖我们原来的位置（而不是添加一个新的路由，最后在我们的历史中两次出现在同一个位置）： + +```javascript +router.addRoute({ path: '/about', component: About }) +// 我们也可以使用 this.$route 或 route = useRoute() （在 setup 中） +router.replace(router.currentRoute.value.fullPath) +``` + +记住，如果你需要等待新的路由显示，可以使用 await router.replace()。 + +在导航守卫中添加路由# +如果你决定在导航守卫内部添加或删除路由，你不应该调用 `router.replace()`，而是通过返回新的位置来触发重定向： + +```javascript +router.beforeEach(to => { + if (!hasNecessaryRoute(to)) { + router.addRoute(generateRoute(to)) + // 触发重定向 + return to.fullPath + } +}) +``` + +上面的例子有两个假设：第一，新添加的路由记录将与 to 位置相匹配，实际上导致与我们试图访问的位置不同。第二，`hasNecessaryRoute()` 在添加新的路由后返回 false，以避免无限重定向。 + +因为是在重定向中，所以我们是在替换将要跳转的导航，实际上行为就像之前的例子一样。而在实际场景中，添加路由的行为更有可能发生在导航守卫之外，例如，当一个视图组件挂载时，它会注册新的路由。 + +**删除路由** +有几个不同的方法来删除现有的路由： + +通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由： + +```javascript +router.addRoute({ path: '/about', name: 'about', component: About }) +// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的 +router.addRoute({ path: '/other', name: 'about', component: Other }) +``` + +通过调用 router.addRoute() 返回的回调： + +```javascript +const removeRoute = router.addRoute(routeRecord) +removeRoute() // 删除路由如果存在的话 +``` + +当路由没有名称时，这很有用。 +通过使用 router.removeRoute() 按名称删除路由： + +```javascript +router.addRoute({ path: '/about', name: 'about', component: About }) +// 删除路由 +router.removeRoute('about') +``` + +需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用 Symbol 作为名字。 +当路由被删除时，所有的别名和子路由也会被同时删除 + +**添加嵌套路由** +要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 `router.addRoute()`，这将有效地添加路由，就像通过 children 添加的一样： + +```javascript +router.addRoute({ name: 'admin', path: '/admin', component: Admin }) +router.addRoute('admin', { path: 'settings', component: AdminSettings }) +这等效于： + +router.addRoute({ + name: 'admin', + path: '/admin', + component: Admin, + children: [{ path: 'settings', component: AdminSettings }], +}) +``` + +**查看现有路由** +`Vue Router` 提供了两个功能来查看现有的路由： + +```javascript +router.hasRoute()：检查路由是否存在。 +router.getRoutes()：获取一个包含所有路由记录的数组。 +``` + +
+ +
小测试：
+ +根据上方小常识，以下关于动态路由的说法不正确的是？

+ +## 答案 + +路径参数不接受 正则表达式 + +## 选项 + +### A + +动态路由的路径参数 用冒号 : 表示 + +### B + +要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性 + +### C + +当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来 diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/6.\350\267\257\347\224\261\347\273\204\344\273\266\344\274\240\345\217\202/config.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/6.\350\267\257\347\224\261\347\273\204\344\273\266\344\274\240\345\217\202/config.json" deleted file mode 100644 index 87715b09427080a03e644d051c4ded7e4de3a3e9..0000000000000000000000000000000000000000 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/6.\350\267\257\347\224\261\347\273\204\344\273\266\344\274\240\345\217\202/config.json" +++ /dev/null @@ -1,10 +0,0 @@ -{ - "node_id": "vue-2e2517cbf7234b6da6951b30e050dda9", - "keywords": [], - "children": [], - "export": [ - "exercises.json" - ], - "keywords_must": [], - "keywords_forbid": [] -} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/7.\350\267\257\347\224\261\351\207\215\345\256\232\345\220\221/config.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/7.\350\267\257\347\224\261\351\207\215\345\256\232\345\220\221/config.json" deleted file mode 100644 index cf7ab1d9476c57d8bdf3b30968f0c171c19788f4..0000000000000000000000000000000000000000 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/7.\350\267\257\347\224\261\351\207\215\345\256\232\345\220\221/config.json" +++ /dev/null @@ -1,10 +0,0 @@ -{ - "node_id": "vue-1dc4d9ad634f4b2ab0fbae0dd628789e", - "keywords": [], - "children": [], - "export": [ - "exercises.json" - ], - "keywords_must": [], - "keywords_forbid": [] -} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\350\267\257\347\224\261\346\250\241\345\274\217/config.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\350\267\257\347\224\261\346\250\241\345\274\217/config.json" deleted file mode 100644 index 7fac376130f646d86e899b11431f0be7e5e0d680..0000000000000000000000000000000000000000 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\350\267\257\347\224\261\346\250\241\345\274\217/config.json" +++ /dev/null @@ -1,10 +0,0 @@ -{ - "node_id": "vue-c8641c7598f24c51b4942259491f7bd0", - "keywords": [], - "children": [], - "export": [ - "exercises.json" - ], - "keywords_must": [], - "keywords_forbid": [] -} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/9.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/config.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/9.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/config.json" deleted file mode 100644 index 4851b3e61fe49e0ff41acd3044907ea3b6720e15..0000000000000000000000000000000000000000 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/9.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/config.json" +++ /dev/null @@ -1,10 +0,0 @@ -{ - "node_id": "vue-d9946cf901924a2ca1a649ad9866ed99", - "keywords": [], - "children": [], - "export": [ - "exercises.json" - ], - "keywords_must": [], - "keywords_forbid": [] -} \ No newline at end of file diff --git a/data/tree.json b/data/tree.json index 0844c96dd1ea5cf535ce1311dfb1e8f89bafbe19..be995e37191bcf1062d76bd00fe8f470aa4931d6 100644 --- a/data/tree.json +++ b/data/tree.json @@ -467,57 +467,71 @@ "keywords_forbid": [] } }, - { - "router-link组件的使用": { - "node_id": "vue-9e9a0c24d86044d48b8e9c8220b8e112", - "keywords": [], - "children": [], - "keywords_must": [], - "keywords_forbid": [] - } - }, { "动态路由": { "node_id": "vue-0e8b0f72e699442f8008a8ba78b9a05e", - "keywords": [], + "keywords": [ + "动态路由" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "Vue" + ], "keywords_forbid": [] } }, { "路由组件传参": { "node_id": "vue-2e2517cbf7234b6da6951b30e050dda9", - "keywords": [], + "keywords": [ + "路由组件传参" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "Vue" + ], "keywords_forbid": [] } }, { - "路由重定向": { + "路由重定向和别名": { "node_id": "vue-1dc4d9ad634f4b2ab0fbae0dd628789e", - "keywords": [], + "keywords": [ + "路由重定向和别名", + "路由重定向", + "别名" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "Vue", + "路由" + ], "keywords_forbid": [] } }, { "路由模式": { "node_id": "vue-c8641c7598f24c51b4942259491f7bd0", - "keywords": [], + "keywords": [ + "路由模式" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "Vue" + ], "keywords_forbid": [] } }, { "前置路由守卫": { "node_id": "vue-d9946cf901924a2ca1a649ad9866ed99", - "keywords": [], + "keywords": [ + "前置路由守卫" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "Vue" + ], "keywords_forbid": [] } },