From 50aa82d2271e285ec366cbab6dd7531e60bc71cc Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 15 Nov 2019 11:37:42 +0100 Subject: [PATCH 01/10] style: add banner style from vuejs.org --- docs/.vuepress/style.styl | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 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 From f34ebab6b0ffa583a108f0b8d71e923eaeed5637 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 15 Nov 2019 11:38:00 +0100 Subject: [PATCH 02/10] docs: add link to Vue Router course --- docs/README.md | 2 ++ docs/guide/README.md | 2 ++ 2 files changed, 4 insertions(+) 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 From 3edec514eb56ef6739b6caf3105342eb0e6d7757 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 15 Nov 2019 11:43:38 +0100 Subject: [PATCH 03/10] docs: add link to Dynamic Routes lesson --- docs/guide/essentials/dynamic-matching.md | 2 ++ 1 file changed, 2 insertions(+) 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 From 6dd05d581867bf1103dac63f9adf28482909cf29 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 15 Nov 2019 11:44:55 +0100 Subject: [PATCH 04/10] docs: add link to Nested Routes lesson --- docs/guide/essentials/nested-routes.md | 2 ++ 1 file changed, 2 insertions(+) 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: ``` From ae7aadbf6b40574bd7889b230551a0be966aacf5 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 15 Nov 2019 11:45:59 +0100 Subject: [PATCH 05/10] docs: add link to Named Routes lesson --- docs/guide/essentials/named-routes.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/guide/essentials/named-routes.md b/docs/guide/essentials/named-routes.md index 297457c52..73077d3e3 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 From 75d2c59f2ab1a31546043a52b038e8393e630619 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 15 Nov 2019 11:48:08 +0100 Subject: [PATCH 06/10] docs: add link to Pass Props to Route Components lesson --- docs/guide/essentials/passing-props.md | 3 +++ 1 file changed, 3 insertions(+) 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 f1bf6f1cf04eb89d00c13bd8948fbf5bd327c7f5 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 15 Nov 2019 11:49:17 +0100 Subject: [PATCH 07/10] docs: add link to Global Navigation Guard lesson --- docs/guide/advanced/navigation-guards.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/guide/advanced/navigation-guards.md b/docs/guide/advanced/navigation-guards.md index 61d9bf13c..af4b58ddc 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 From 272d4d15b0f8515fd330124e8905b9e55ac51e8a Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 15 Nov 2019 11:51:00 +0100 Subject: [PATCH 08/10] docs: add link to Transitions lesson --- docs/guide/advanced/transitions.md | 2 ++ 1 file changed, 2 insertions(+) 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 From 85779c4a65f73c4c16b49bbf81dac37f14cb92f8 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 15 Nov 2019 11:52:28 +0100 Subject: [PATCH 09/10] docs: add link to Scroll Behavior lesson --- docs/guide/advanced/scroll-behavior.md | 2 ++ 1 file changed, 2 insertions(+) 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`.** From 74d4b4a63232449e27483500fcf4c07c9c5acfff Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Fri, 15 Nov 2019 11:53:08 +0100 Subject: [PATCH 10/10] docs: add link to Lazy Looading Routes lesson --- docs/guide/advanced/lazy-loading.md | 2 ++ 1 file changed, 2 insertions(+) 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.