From 5c2a2916c4546344b5f1ee636030ca93c1340b7f Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Mon, 3 Jul 2017 15:08:59 +0200 Subject: [PATCH 01/75] Do not remove trailing slash in strict mode (#1557) --- src/create-route-map.js | 10 +++++++--- test/unit/specs/create-map.spec.js | 18 ++++++++++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/create-route-map.js b/src/create-route-map.js index 6e48e683f..4077392a1 100644 --- a/src/create-route-map.js +++ b/src/create-route-map.js @@ -57,8 +57,12 @@ function addRouteRecord ( ) } - const normalizedPath = normalizePath(path, parent) const pathToRegexpOptions: PathToRegexpOptions = route.pathToRegexpOptions || {} + const normalizedPath = normalizePath( + path, + parent, + pathToRegexpOptions.strict + ) if (typeof route.caseSensitive === 'boolean') { pathToRegexpOptions.sensitive = route.caseSensitive @@ -157,8 +161,8 @@ function compileRouteRegex (path: string, pathToRegexpOptions: PathToRegexpOptio return regex } -function normalizePath (path: string, parent?: RouteRecord): string { - path = path.replace(/\/$/, '') +function normalizePath (path: string, parent?: RouteRecord, strict?: boolean): string { + if (!strict) path = path.replace(/\/$/, '') if (path[0] === '/') return path if (parent == null) return path return cleanPath(`${parent.path}/${path}`) diff --git a/test/unit/specs/create-map.spec.js b/test/unit/specs/create-map.spec.js index 8e0c42ada..9d8e62f36 100644 --- a/test/unit/specs/create-map.spec.js +++ b/test/unit/specs/create-map.spec.js @@ -145,5 +145,23 @@ describe('Creating Route Map', function () { expect(nameMap.foo.regex.ignoreCase).toBe(false) }) + + it('keeps trailing slashes with strict mode', function () { + const { pathList } = createRouteMap([ + { + path: '/foo/', + component: Foo, + pathToRegexpOptions: { + strict: true + } + }, + { + path: '/bar/', + component: Foo + } + ]) + + expect(pathList).toEqual(['/foo/', '/bar']) + }) }) }) From 6b42c4e266b9f3960466aeab418da8b557d13c31 Mon Sep 17 00:00:00 2001 From: Jaul Date: Thu, 6 Jul 2017 00:14:31 +0800 Subject: [PATCH 02/75] Create passing-props.md (#1559) --- docs/zh-cn/essentials/passing-props.md | 76 ++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 docs/zh-cn/essentials/passing-props.md diff --git a/docs/zh-cn/essentials/passing-props.md b/docs/zh-cn/essentials/passing-props.md new file mode 100644 index 000000000..a6c9273c4 --- /dev/null +++ b/docs/zh-cn/essentials/passing-props.md @@ -0,0 +1,76 @@ +# 路由组件传参 + +在组件中使用`$route`会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的url上使用，限制了其灵活性。 + +使用props将组件和路由解耦： + +**❌ 与$route耦合** + +``` js +const User = { + template: '
User {{ $route.params.id }}
' +} +const router = new VueRouter({ + routes: [ + { path: '/user/:id', component: User } + ] +}) +``` + +**👍 使用props解耦** + +``` js +const User = { + props: ['id'], + template: '
User {{ id }}
' +} +const router = new VueRouter({ + routes: [ + { path: '/user/:id', component: User, props: true } + + // 对于包含命名视图的路由，你必须分别为每个命名视图添加props选项： + { + path: '/user/:id', + components: { default: User, sidebar: Sidebar }, + props: { default: true, sidebar: false } + } + ] +}) +``` + +这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。 + +### 布尔模式 + +如果props被设置为true，`route.params`将会被设置为组件属性。 + +### 对象模式 + +如果props是一个对象，它会被按原样设置为组件属性。当props是静态的时候有用。 + +``` js +const router = new VueRouter({ + routes: [ + { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } + ] +}) +``` + +### 函数模式 + +你可以创建一个函数返回props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。 + +``` js +const router = new VueRouter({ + routes: [ + { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) } + ] +}) +``` + +Url: `/search?q=vue` 会将 `{query: "vue"}` 作为属性传递给SearchUser组件。 + +请尽可能保持props函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义props，请使用包装组件，这样vue才可以对状态变化做出反应。 + + +更多高级用法，请查看[例子](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js). From af53d1d69350fe930ec8fb70ca76371902d3dcca Mon Sep 17 00:00:00 2001 From: Alexander Sokolov Date: Wed, 5 Jul 2017 23:37:32 +0300 Subject: [PATCH 03/75] [RU] Updates (#1564) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * russian translation update v2.5.+ * router-instance.md исправлена опечатка * router-link.md исправление * navigation-guards.md исправлена опечатка * getting-started.md standalone -> полная сборка * data-fetching.md бэктики * lazy-loading.md бэктики * transitions.md бэктики * route-object.md бэктики * router-link.md бэктики * getting-started.md бэктики * history-mode.md добавлен раздел с примером для IIS * router-instance.md добавлено уточнение * lazy-loading.md require -> import * lazy-loading.md новый синтаксис разделения кода * SUMMARY.md правки к 2.6 * scroll-behavior.md обновление к 2.6 * options.md добавления для 2.6 * named-routes.md правка * SUMMARY.md экземпляр * navigation-guards.md экземпляр * scroll-behavior.md экземпляр * component-inhections.md экземпляр * router-instance.md экземпляр * dynamic-matching.md экземпляр * getting-started.md экземпляр * named-routes.md экземпляр * navigation.md экземпляр * data-fetching.md правка * lazy-loading.md merge --- docs/ru/SUMMARY.md | 18 ++++++++++---- docs/ru/advanced/data-fetching.md | 4 ++-- docs/ru/advanced/lazy-loading.md | 33 ++++++++++++++------------ docs/ru/advanced/navigation-guards.md | 12 +++++----- docs/ru/advanced/scroll-behavior.md | 5 ++-- docs/ru/api/component-injections.md | 4 ++-- docs/ru/api/options.md | 16 ++++++++++++- docs/ru/api/router-instance.md | 9 ++++--- docs/ru/essentials/dynamic-matching.md | 2 +- docs/ru/essentials/getting-started.md | 6 ++--- docs/ru/essentials/history-mode.md | 28 ++++++++++++++++++++++ docs/ru/essentials/named-routes.md | 4 ++-- docs/ru/essentials/navigation.md | 2 +- 13 files changed, 101 insertions(+), 42 deletions(-) diff --git a/docs/ru/SUMMARY.md b/docs/ru/SUMMARY.md index 8abc6c9d5..9eeca8ba6 100644 --- a/docs/ru/SUMMARY.md +++ b/docs/ru/SUMMARY.md @@ -24,9 +24,19 @@ - [Скроллинг](advanced/scroll-behavior.md) - [Ленивая загрузка путей](advanced/lazy-loading.md) - Справочник API - - [router-link](api/router-link.md) - - [router-view](api/router-view.md) - - [Объект route](api/route-object.md) - [Опции конструктора Router'а](api/options.md) - - [Инстанс Router'а](api/router-instance.md) + - [routes](api/options.md#routes) + - [mode](api/options.md#mode) + - [base](api/options.md#base) + - [linkActiveClass](api/options.md#linkactiveclass) + - [linkExactActiveClass](api/options.md#linkexactactiveclass) + - [scrollBehavior](api/options.md#scrollbehavior) + - [parseQuery / stringifyQuery](api/options.md#parsequery--stringifyquery) + - [fallback](api/options.md#fallback) + - [Экземпляр Router](api/router-instance.md) + - [Свойства](api/router-instance.md#свойства) + - [Методы](api/router-instance.md#методы) + - [Объект route](api/route-object.md) - [Интеграция с компонентами Vue](api/component-injections.md) + - [router-link](api/router-link.md) + - [router-view](api/router-view.md) diff --git a/docs/ru/advanced/data-fetching.md b/docs/ru/advanced/data-fetching.md index 6a4482431..aa5e251c9 100644 --- a/docs/ru/advanced/data-fetching.md +++ b/docs/ru/advanced/data-fetching.md @@ -4,7 +4,7 @@ - **Запросив данные после перехода**: сначала перейти к новому пути, затем запросить данные в хуке жизненного цикла целевого компонента. По мере загрузки данных отобразить индикатор состояния загрузки. -- **Запросив данные перед переходом**: запросить данные в сторожевом хуке роутера, и завершить навигацию уже по когда они будут получены. +- **Запросив данные перед переходом**: запросить данные в сторожевом хуке роутера, и завершить навигацию уже когда они будут получены. С технической точки зрения, оба способа годятся — выбор зависит от того, какой UX вы хотите получить. @@ -18,7 +18,7 @@