diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/1.vue-router\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/1.vue-router\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json" index 3f658aca441589555a3dc541a66fcca84c5ece47..b4c3f7bd74b59cd2d499b30ffbce407a3ad7179b 100644 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/1.vue-router\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json" +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/1.vue-router\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "ae1fe8c628e74e8790d3a216d7d78fe0" diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/2.\350\267\257\347\224\261\345\256\211\350\243\205/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/2.\350\267\257\347\224\261\345\256\211\350\243\205/exercises.json" index be02a65d87c04406ac6af10a7557d443f694d0dc..cfe582461462e37b7245ea5e51583ed617905ceb 100644 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/2.\350\267\257\347\224\261\345\256\211\350\243\205/exercises.json" +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/2.\350\267\257\347\224\261\345\256\211\350\243\205/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "3abb616d5005498e8487d4a007263a2e" 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/config.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/config.json" index 92e9ec9d6e64805485971dcbdef196c7ca30c944..8e347539ff6ec8c22ef6fd1c3a8f7abe1f9fa676 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/config.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/config.json" @@ -1,10 +1,14 @@ { "node_id": "vue-35a33dafa3c74a3584269e6317cd7e09", - "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/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" new file mode 100644 index 0000000000000000000000000000000000000000..655e5e7dd3c8bb349390ed3c43a78b5bb72c17f5 --- /dev/null +++ "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" @@ -0,0 +1,7 @@ +{ + "type": "code_options", + "author": null, + "source": "exercises.md", + "notebook_enable": false, + "exercise_id": "0b9df39086d141fc992abfcfa2ace8fc" +} \ 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.md" "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.md" new file mode 100644 index 0000000000000000000000000000000000000000..c2bc7618eea92870460a2581ec3becc7ede9eb90 --- /dev/null +++ "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.md" @@ -0,0 +1,123 @@ +# 编程式的导航 + +
小常识：
+
+ +**编程式导航** + +除了使用 `` 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 + +**导航到不同的位置** + +注意：在 Vue 实例中，你可以通过 `$router` 访问路由实例。因此你可以调用 `this.$router.push`。 + +想要导航到不同的 URL，可以使用 `router.push` 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。 + +当你点击 `` 时，内部会调用这个方法，所以点击 `` 相当于调用 `router.push(...)` ： +|声明式 | 编程式 | +|--|--| +| `` | `router.push(...)` | + + + +该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如： + +```javascript +// 字符串路径 +router.push('/users/eduardo') + +// 带有路径的对象 +router.push({ path: '/users/eduardo' }) + +// 命名的路由，并加上参数，让路由建立 url +router.push({ name: 'user', params: { username: 'eduardo' } }) + +// 带查询参数，结果是 /register?plan=private +router.push({ path: '/register', query: { plan: 'private' } }) + +// 带 hash，结果是 /about#team +router.push({ path: '/about', hash: '#team' }) +``` + +注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path ： + +```javascript +const username = 'eduardo' +// 我们可以手动建立 url，但我们必须自己处理编码 +router.push(`/user/${username}`) // -> /user/eduardo +// 同样 +router.push({ path: `/user/${username}` }) // -> /user/eduardo +// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益 +router.push({ name: 'user', params: { username } }) // -> /user/eduardo +// `params` 不能与 `path` 一起使用 +router.push({ path: '/user', params: { username } }) // -> /user +``` + +由于属性 `to` 与 `router.push` 接受的对象种类相同，所以两者的规则完全相同。 + +`router.push` 和所有其他导航方法都会返回一个 Promise，让我们可以等到导航完成后才知道是成功还是失败。我们将在 Navigation Handling 中详细介绍。 + +**替换当前位置** +它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。 +| 声明式 | 编程式 | +|--|--| +| | router.replace(...) | + +也可以直接在传递给 `router.push` 的 `routeLocation` 中增加一个属性 `replace: true ：` + +```javascript +router.push({ path: '/home', replace: true }) +// 相当于 +router.replace({ path: '/home' }) +``` + +**横跨历史** +该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)。 + +例子 + +```javascript +// 向前移动一条记录，与 router.forward() 相同 +router.go(1) + +// 返回一条记录，与router.back() 相同 +router.go(-1) + +// 前进 3 条记录 +router.go(3) + +// 如果没有那么多记录，静默失败 +router.go(-100) +router.go(100) +``` + +**篡改历史** +你可能已经注意到，`router.push、router.replace` 和 `router.go` 是 `window.history.pushState、window.history.replaceState` 和 `window.history.go` 的翻版，它们确实模仿了 `window.history 的 API`。 + +因此，如果你已经熟悉 Browser History APIs，在使用 Vue Router 时，操作历史记录就会觉得很熟悉。 + +值得一提的是，无论在创建路由器实例时传递什么样的`history` 配置，`Vue Router` 的导航方法`(push、replace、go)`都能始终如一地工作。 + +
+ +
小测试：
+ +观察下列编程式导航，描述不正确的是?

+ +## 答案 + +router.push({ path: '/user', params: { username：'eduardo' } }) 导航的结果是/user/eduardo + +## 选项 + +### A + +带 hash的导航router.push({ path: '/about', hash: '#team' })，结果是 /about#team + +### B + +带查询参数的导航router.push({ path: '/register', query: { plan: 'private' } }) + +### C + +to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。 diff --git "a/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/config.json" "b/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/config.json" index a5998b4c4e7fe4d32cffa60421f5cd25bad4f0be..871d92d0c4f8bf835589ab7c291bf6e54237ff82 100644 --- "a/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/config.json" +++ "b/data/2.Vue\344\270\255\351\230\266/7.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/1.\346\263\250\345\206\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/config.json" @@ -3,6 +3,7 @@ "keywords": [], "children": [], "export": [ + "exercises.json" ], "keywords_must": [], "keywords_forbid": [] diff --git "a/data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/2.Object.defineProperty()/config.json" "b/data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/2.Object.defineProperty()/config.json" index 43b103dfce67b5cd8d0897fdd6df09e192983d7f..e828b0fc4b5fdc95f18843d1de93ecf9a0068255 100644 --- "a/data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/2.Object.defineProperty()/config.json" +++ "b/data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/2.Object.defineProperty()/config.json" @@ -3,7 +3,7 @@ "keywords": [], "children": [], "export": [ - + "exercises.json" ], "keywords_must": [], "keywords_forbid": [] diff --git a/data/tree.json b/data/tree.json index d97ffd1c786abe9da597d1ce14ddd16ba1c886a8..0844c96dd1ea5cf535ce1311dfb1e8f89bafbe19 100644 --- a/data/tree.json +++ b/data/tree.json @@ -457,9 +457,13 @@ { "编程式的导航": { "node_id": "vue-35a33dafa3c74a3584269e6317cd7e09", - "keywords": [], + "keywords": [ + "编程式的导航" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "Vue" + ], "keywords_forbid": [] } },