From f647afaf2a659335fa4e76a00538f1aabc32ae9c Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Fri, 11 Jan 2019 12:06:18 +0800 Subject: [PATCH 1/2] docs(zh): update --- docs/zh/guide/essentials/dynamic-matching.md | 28 ++++++++++++++++++++ docs/zh/guide/essentials/navigation.md | 4 +-- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/docs/zh/guide/essentials/dynamic-matching.md b/docs/zh/guide/essentials/dynamic-matching.md index 59e44059b..803b06ec9 100644 --- a/docs/zh/guide/essentials/dynamic-matching.md +++ b/docs/zh/guide/essentials/dynamic-matching.md @@ -66,6 +66,34 @@ const User = { } ``` +## 捕获所有路由或 404 Not found 路由 + +常规参数只会匹配被 `/` 分隔的 URL 片段中的字符。如果想匹配**任意路径**,我们可以使用通配符 (`*`): + +```js +{ + // 会匹配所有路径 + path: '*' +} +{ + // 会匹配以 `/user-` 开头的任意路径 + path: '/user-*' +} +``` + +当使用*通配符*路由时,请确保路由的顺序是正确的,也就是说含有*通配符*的路由应该放在最后。路由 `{ path: '*' }` 通常用于客户端 404 错误。如果你使用了*History 模式*,请确保[正确配置你的服务器](./history-mode.md)。 + +当使用一个*通配符*时,`$route.params` 内会自动添加一个名为 `pathMatch` 参数。它包含了 URL 通过*通配符*被匹配的部分: + +```js +// Given a route { path: '/user-*' } +this.$router.push('/user-admin') +this.$route.params.pathMatch // 'admin' +// Given a route { path: '*' } +this.$router.push('/non-existing') +this.$route.params.pathMatch // '/non-existing' +``` + ## 高级匹配模式 `vue-router` 使用 [path-to-regexp](https://github.com/pillarjs/path-to-regexp) 作为路径匹配引擎,所以支持很多高级的匹配模式,例如:可选的动态路径参数、匹配零个或多个、一个或多个,甚至是自定义正则匹配。查看它的 [文档](https://github.com/pillarjs/path-to-regexp#parameters) 学习高阶的路径匹配,还有 [这个例子 ](https://github.com/vuejs/vue-router/blob/next/examples/route-matching/app.js) 展示 `vue-router` 怎么使用这类匹配。 diff --git a/docs/zh/guide/essentials/navigation.md b/docs/zh/guide/essentials/navigation.md index e09929e4e..24fdf463a 100644 --- a/docs/zh/guide/essentials/navigation.md +++ b/docs/zh/guide/essentials/navigation.md @@ -28,7 +28,7 @@ router.push('home') router.push({ path: 'home' }) // 命名的路由 -router.push({ name: 'user', params: { userId: 123 }}) +router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) @@ -37,7 +37,7 @@ router.push({ path: 'register', query: { plan: 'private' }}) **注意:如果提供了 `path`,`params` 会被忽略,上述例子中的 `query` 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 `name` 或手写完整的带有参数的 `path`:** ```js -const userId = 123 +const userId = '123' router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 这里的 params 不生效 From 07d3879069a2304be77a0cc6bdb0fa5e3b52cfbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= Date: Fri, 11 Jan 2019 15:45:31 +0800 Subject: [PATCH 2/2] Update dynamic-matching.md --- docs/zh/guide/essentials/dynamic-matching.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/zh/guide/essentials/dynamic-matching.md b/docs/zh/guide/essentials/dynamic-matching.md index 803b06ec9..3a0ae5be6 100644 --- a/docs/zh/guide/essentials/dynamic-matching.md +++ b/docs/zh/guide/essentials/dynamic-matching.md @@ -86,10 +86,10 @@ const User = { 当使用一个*通配符*时,`$route.params` 内会自动添加一个名为 `pathMatch` 参数。它包含了 URL 通过*通配符*被匹配的部分: ```js -// Given a route { path: '/user-*' } +// 给出一个路由 { path: '/user-*' } this.$router.push('/user-admin') this.$route.params.pathMatch // 'admin' -// Given a route { path: '*' } +// 给出一个路由 { path: '*' } this.$router.push('/non-existing') this.$route.params.pathMatch // '/non-existing' ```