From 39d46b254bd8130464626539e7b73b4cc760241b Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 26 Feb 2020 10:36:33 +0100 Subject: [PATCH 01/22] chore(changelog): 3.1.6 --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index dadf1a929..d9843a0ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ +## [3.1.6](https://github.com/vuejs/vue-router/compare/v3.1.5...v3.1.6) (2020-02-26) + + +### Bug Fixes + +* preserve history state when reloading ([a4ec3e2](https://github.com/vuejs/vue-router/commit/a4ec3e2)) +* **ts:** add null to Route.name ([#3117](https://github.com/vuejs/vue-router/issues/3117)) ([8f831f2](https://github.com/vuejs/vue-router/commit/8f831f2)) +* correctly calculate `path` when `pathMatch` is empty string ([#3111](https://github.com/vuejs/vue-router/issues/3111)) ([38e6ccd](https://github.com/vuejs/vue-router/commit/38e6ccd)), closes [#3106](https://github.com/vuejs/vue-router/issues/3106) + + + ## [3.1.5](https://github.com/vuejs/vue-router/compare/v3.1.4...v3.1.5) (2020-01-15) From ef192c95ff9135e5ba02270c855fcb109385479d Mon Sep 17 00:00:00 2001 From: Alexander Sokolov Date: Tue, 3 Mar 2020 20:10:43 +0300 Subject: [PATCH 02/22] docs(ru): Translation update (#3136) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: [RU] Translation update * README.md обновление * navigation.md fix * consistent code blocks * dynamic-matching.md add new section * dynamic-matching.md fix * navigation-guards.md fix title * data-fetching.md fix * README.md fix * (docs) [RU] Translation update * fix typo * navigation-guards.md update * redirect-and-alias.md update * change '$route' to $route * date-fetching.md formatting * histort-mode.md update * navigation-guards.md update * navigation-guards.md update * navigation-guards.md fix example --- docs/ru/guide/advanced/navigation-guards.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ru/guide/advanced/navigation-guards.md b/docs/ru/guide/advanced/navigation-guards.md index e5555d2e3..4e1254a4e 100644 --- a/docs/ru/guide/advanced/navigation-guards.md +++ b/docs/ru/guide/advanced/navigation-guards.md @@ -39,7 +39,7 @@ router.beforeEach((to, from, next) => { ```js // ПЛОХО router.beforeEach((to, from, next) => { - if (!isAuthenticated) next('/login') + if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) // если пользователь не авторизован, то `next` будет вызываться дважды next() }) @@ -48,7 +48,7 @@ router.beforeEach((to, from, next) => { ```js // ХОРОШО router.beforeEach((to, from, next) => { - if (!isAuthenticated) next('/login') + if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) else next() }) ``` From 1c8e8029c8d4126a529373e9d79a22963b0b5612 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 6 Mar 2020 09:36:27 -0600 Subject: [PATCH 03/22] docs: add Vueschool links (#3031) * style: add banner style from vuejs.org * docs: add link to Vue Router course * docs: add link to Dynamic Routes lesson * docs: add link to Nested Routes lesson * docs: add link to Named Routes lesson * docs: add link to Pass Props to Route Components lesson * docs: add link to Global Navigation Guard lesson * docs: add link to Transitions lesson * docs: add link to Scroll Behavior lesson * docs: add link to Lazy Looading Routes lesson --- docs/.vuepress/style.styl | 33 +++++++++++++++++++++++ docs/README.md | 2 ++ docs/guide/README.md | 2 ++ docs/guide/advanced/lazy-loading.md | 2 ++ docs/guide/advanced/navigation-guards.md | 2 ++ docs/guide/advanced/scroll-behavior.md | 2 ++ docs/guide/advanced/transitions.md | 2 ++ docs/guide/essentials/dynamic-matching.md | 2 ++ docs/guide/essentials/named-routes.md | 2 ++ docs/guide/essentials/nested-routes.md | 2 ++ docs/guide/essentials/passing-props.md | 3 +++ 11 files changed, 54 insertions(+) diff --git a/docs/.vuepress/style.styl b/docs/.vuepress/style.styl index de6fb8800..54dd2b7c7 100644 --- a/docs/.vuepress/style.styl +++ b/docs/.vuepress/style.styl @@ -12,3 +12,36 @@ margin-left 15px img, span vertical-align middle + +.vueschool + background-color #e7ecf3 + padding 1em 1.25em + border-radius 2px + color #486491 + position relative + display flex + a + color #486491 !important + position relative + padding-left 36px + &:before + content '' + position absolute + display block + width 30px + height 30px + top calc(50% - 15px); + left -4px + border-radius 50% + background-color #73abfe + &:after + content '' + position absolute + display block + width 0 + height 0 + top calc(50% - 5px) + left 8px + border-top 5px solid transparent + border-bottom 5px solid transparent + border-left 8px solid #fff diff --git a/docs/README.md b/docs/README.md index 0fb596fdf..51a4932d7 100644 --- a/docs/README.md +++ b/docs/README.md @@ -4,6 +4,8 @@ For TypeScript users, `vue-router@3.0+` requires `vue@2.5+`, and vice versa. ::: +
Watch a free video course about Vue Router on Vue School
+ Vue Router is the official router for [Vue.js](http://vuejs.org). It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include: - Nested route/view mapping diff --git a/docs/guide/README.md b/docs/guide/README.md index 00c537027..18c455010 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -6,6 +6,8 @@ We will be using [ES2015](https://github.com/lukehoban/es6features) in the code Also, all examples will be using the full version of Vue to make on-the-fly template compilation possible. See more details [here](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only). ::: +
Watch a free video course about Vue Router on Vue School
+ Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them. Here's a basic example: ## HTML diff --git a/docs/guide/advanced/lazy-loading.md b/docs/guide/advanced/lazy-loading.md index 7735a471b..803155b00 100644 --- a/docs/guide/advanced/lazy-loading.md +++ b/docs/guide/advanced/lazy-loading.md @@ -1,5 +1,7 @@ # Lazy Loading Routes +
Learn how to lazy load routes with a free lesson on Vue School
+ When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route's components into a separate chunk, and only load them when the route is visited. Combining Vue's [async component feature](https://vuejs.org/guide/components.html#Async-Components) and webpack's [code splitting feature](https://webpack.js.org/guides/code-splitting-async/), it's trivially easy to lazy-load route components. diff --git a/docs/guide/advanced/navigation-guards.md b/docs/guide/advanced/navigation-guards.md index 3a99e74cf..3e729e589 100644 --- a/docs/guide/advanced/navigation-guards.md +++ b/docs/guide/advanced/navigation-guards.md @@ -6,6 +6,8 @@ Remember that **params or query changes won't trigger enter/leave navigation gua ## Global Before Guards +
Learn how navigation guards works with a free lesson on Vue School
+ You can register global before guards using `router.beforeEach`: ```js diff --git a/docs/guide/advanced/scroll-behavior.md b/docs/guide/advanced/scroll-behavior.md index d58d797b2..485abc9f1 100644 --- a/docs/guide/advanced/scroll-behavior.md +++ b/docs/guide/advanced/scroll-behavior.md @@ -1,5 +1,7 @@ # Scroll Behavior +
Learn to control the scroll behavior with a free lesson on Vue School
+ When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. `vue-router` allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation. **Note: this feature only works if the browser supports `history.pushState`.** diff --git a/docs/guide/advanced/transitions.md b/docs/guide/advanced/transitions.md index 269d3cc23..a963da736 100644 --- a/docs/guide/advanced/transitions.md +++ b/docs/guide/advanced/transitions.md @@ -1,5 +1,7 @@ # Transitions +
Learn how to create route transitions with a free lesson on Vue School
+ Since the `` is essentially a dynamic component, we can apply transition effects to it the same way using the `` component: ``` html diff --git a/docs/guide/essentials/dynamic-matching.md b/docs/guide/essentials/dynamic-matching.md index 12807125b..15bcdfca4 100644 --- a/docs/guide/essentials/dynamic-matching.md +++ b/docs/guide/essentials/dynamic-matching.md @@ -1,5 +1,7 @@ # Dynamic Route Matching +
Learn how to match dynamic routes with a free lesson on Vue School
+ Very often we will need to map routes with the given pattern to the same component. For example we may have a `User` component which should be rendered for all users but with different user IDs. In `vue-router` we can use a dynamic segment in the path to achieve that: ```js diff --git a/docs/guide/essentials/named-routes.md b/docs/guide/essentials/named-routes.md index 2268f1425..972a72cb0 100644 --- a/docs/guide/essentials/named-routes.md +++ b/docs/guide/essentials/named-routes.md @@ -1,5 +1,7 @@ # Named Routes +
Learn how to use named routes and params with a free lesson on Vue School
+ Sometimes it is more convenient to identify a route with a name, especially when linking to a route or performing navigations. You can give a route a name in the `routes` options while creating the Router instance: ``` js diff --git a/docs/guide/essentials/nested-routes.md b/docs/guide/essentials/nested-routes.md index 8242d7526..f0dbb14df 100644 --- a/docs/guide/essentials/nested-routes.md +++ b/docs/guide/essentials/nested-routes.md @@ -1,5 +1,7 @@ # Nested Routes +
Learn how to work with nested routes with a free lesson on Vue School
+ Real app UIs are usually composed of components that are nested multiple levels deep. It is also very common that the segments of a URL corresponds to a certain structure of nested components, for example: ``` diff --git a/docs/guide/essentials/passing-props.md b/docs/guide/essentials/passing-props.md index ce0f84a2d..29e11cc09 100644 --- a/docs/guide/essentials/passing-props.md +++ b/docs/guide/essentials/passing-props.md @@ -1,5 +1,8 @@ # Passing Props to Route Components +
Learn how to pass props to route components with a free lesson on Vue School
+ + Using `$route` in your component creates a tight coupling with the route which limits the flexibility of the component as it can only be used on certain URLs. To decouple this component from the router use option `props`: From d3edd633f7a5ffa206211478a91610cb6ecd314b Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Mon, 16 Mar 2020 10:24:50 +0100 Subject: [PATCH 04/22] refactor: code format --- types/router.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/router.d.ts b/types/router.d.ts index ed199f5a1..77c69bde8 100644 --- a/types/router.d.ts +++ b/types/router.d.ts @@ -1,13 +1,13 @@ import Vue, { ComponentOptions, PluginFunction, AsyncComponent } from 'vue' type Component = ComponentOptions | typeof Vue | AsyncComponent -type Dictionary < T > = { [key: string]: T } +type Dictionary = { [key: string]: T } type ErrorHandler = (err: Error) => void export type RouterMode = 'hash' | 'history' | 'abstract' export type RawLocation = string | Location export type RedirectOption = RawLocation | ((to: Route) => RawLocation) -export type NavigationGuard < V extends Vue = Vue > = ( +export type NavigationGuard = ( to: Route, from: Route, next: (to?: RawLocation | false | ((vm: V) => any) | void) => void From 6ec0ee563898ed513556f589209e8456d54ccd3b Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Fri, 20 Mar 2020 15:14:15 -0700 Subject: [PATCH 05/22] feat(link): add aria-current to active links (close #2116) (#3073) * feat(core): add aria-current to active links (close #2116) * feat(core): update aria-current to exact active route * feat(core): add ariaCurrentValue prop and add test * feat(core): type modification * feat(core): update aria-current typing to string --- docs/api/README.md | 7 +++++++ src/components/link.js | 9 ++++++++- test/e2e/specs/active-links.js | 3 +++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/docs/api/README.md b/docs/api/README.md index 71aada72b..fc30b9e6f 100644 --- a/docs/api/README.md +++ b/docs/api/README.md @@ -163,6 +163,13 @@ If you add a `target="_blank"` to your `a` element, you must omit the `@click="n Configure the active CSS class applied when the link is active with exact match. Note the default value can also be configured globally via the `linkExactActiveClass` router constructor option. +### aria-current-value + +- type: `'page' | 'step' | 'location' | 'date' | 'time'` +- default: `"page"` + + Configure the value of `aria-current` when the link is active with exact match. It must be one of the [allowed values for aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the default of `page` should be the best fit. + ## `` The `` component is a functional component that renders the matched component for the given path. Components rendered in `` can also contain their own ``, which will render components for nested paths. diff --git a/src/components/link.js b/src/components/link.js index 3df19b3eb..c0f22503b 100644 --- a/src/components/link.js +++ b/src/components/link.js @@ -27,6 +27,10 @@ export default { replace: Boolean, activeClass: String, exactActiveClass: String, + ariaCurrentValue: { + type: String, + default: 'page' + }, event: { type: eventTypes, default: 'click' @@ -67,6 +71,8 @@ export default { ? classes[exactActiveClass] : isIncludedRoute(current, compareTarget) + const ariaCurrentValue = classes[exactActiveClass] ? this.ariaCurrentValue : null + const handler = e => { if (guardEvent(e)) { if (this.replace) { @@ -117,7 +123,7 @@ export default { if (this.tag === 'a') { data.on = on - data.attrs = { href } + data.attrs = { href, 'aria-current': ariaCurrentValue } } else { // find the first child and apply listener and href const a = findAnchor(this.$slots.default) @@ -145,6 +151,7 @@ export default { const aAttrs = (a.data.attrs = extend({}, a.data.attrs)) aAttrs.href = href + aAttrs['aria-current'] = ariaCurrentValue } else { // doesn't have child, apply listener to self data.on = on diff --git a/test/e2e/specs/active-links.js b/test/e2e/specs/active-links.js index 686e94af2..9969b0d7e 100644 --- a/test/e2e/specs/active-links.js +++ b/test/e2e/specs/active-links.js @@ -31,6 +31,7 @@ module.exports = { .assert.attributeContains('li:nth-child(18) a', 'href', '/active-links/redirect-image') .assert.attributeContains('li:nth-child(19) a', 'href', '/active-links/redirect-image') .assert.containsText('.view', 'Home') + .assert.not.attributeEquals(`li:nth-child(3) a`, 'aria-current', 'page') assertActiveLinks(1, [1, 2], null, [1, 2]) assertActiveLinks(2, [1, 2], null, [1, 2]) @@ -70,12 +71,14 @@ module.exports = { browser.assert .cssClassPresent(`li:nth-child(${i}) a`, 'router-link-exact-active') .assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-active') + .assert.attributeEquals(`li:nth-child(${i}) a`, 'aria-current', 'page') }) exactActiveLI && exactActiveLI.forEach(i => { browser.assert .cssClassPresent(`li:nth-child(${i})`, 'router-link-exact-active') .assert.cssClassPresent(`li:nth-child(${i})`, 'router-link-active') + .assert.attributeEquals(`li:nth-child(${i}) a`, 'aria-current', 'page') }) } } From bc41f67e99aeeb5306da7e8d6b2f2f41649196f7 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 25 Mar 2020 09:49:38 +0100 Subject: [PATCH 06/22] fix: check for pushState being a function Closes #3154 --- src/util/push-state.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/util/push-state.js b/src/util/push-state.js index c5dda83e1..dcbab672b 100644 --- a/src/util/push-state.js +++ b/src/util/push-state.js @@ -19,7 +19,7 @@ export const supportsPushState = return false } - return window.history && 'pushState' in window.history + return window.history && typeof window.history.pushState === 'function' })() export function pushState (url?: string, replace?: boolean) { From 11e779ac94eb226e4f52677003ff8d80e5648885 Mon Sep 17 00:00:00 2001 From: Alexander Sokolov Date: Sun, 12 Apr 2020 17:39:34 +0300 Subject: [PATCH 07/22] docs(ru): translation update (#3170) --- docs/ru/api/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/ru/api/README.md b/docs/ru/api/README.md index aec352514..151f155a2 100644 --- a/docs/ru/api/README.md +++ b/docs/ru/api/README.md @@ -163,6 +163,13 @@ sidebar: auto Указание активного CSS класса, который применяется когда ссылка активна с точным соответствием пути. Обратите внимание, что значение по умолчанию можно задать глобально в опции `linkExactActiveClass` конструктора маршрутизатора. +### aria-current-value + +- тип: `'page' | 'step' | 'location' | 'date' | 'time'` +- по умолчанию: `"page"` + + Настройка значения `aria-current` когда ссылка активна по точному (exact) совпадению. Это должно быть одно из [разрешённых значений для aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) спецификации ARIA. В большинстве случаев наиболее подходящим значением будет `page`. + ## `` Функциональный компонент `` отображает компонент соответствующий данному маршруту. Компоненты внутри `` также могут содержать в шаблоне собственный `` (он будет использован для отображения компонентов вложенных маршрутов). From 04a2143326dd3eb2a9ebecd45e87edd35230db6c Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Sat, 9 May 2020 11:39:14 +0200 Subject: [PATCH 08/22] fix(html5): make base case insensitive Fix #2154 This is mostly convenience so it's always made case insensitive. If there are any case sensitive requirements, the test should be made server side. --- src/history/html5.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/history/html5.js b/src/history/html5.js index e1cdba97d..d4a47632e 100644 --- a/src/history/html5.js +++ b/src/history/html5.js @@ -73,7 +73,7 @@ export class HTML5History extends History { export function getLocation (base: string): string { let path = decodeURI(window.location.pathname) - if (base && path.indexOf(base) === 0) { + if (base && path.toLowerCase().indexOf(base.toLowerCase()) === 0) { path = path.slice(base.length) } return (path || '/') + window.location.search + window.location.hash From c755de984dd92ebad93b613832a80764708912f1 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Sat, 9 May 2020 11:41:11 +0200 Subject: [PATCH 09/22] ci: longer transition duration --- examples/transitions/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/transitions/index.html b/examples/transitions/index.html index e18704f31..1abaa4f81 100644 --- a/examples/transitions/index.html +++ b/examples/transitions/index.html @@ -2,14 +2,14 @@