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

Author: rahaug

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

docs/README.md

@@ -4,6 +4,8 @@
 For TypeScript users, `vue-router@3.0+` requires `vue@2.5+`, and vice versa.
 :::
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 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

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).
 :::
 
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">Watch a free video course about Vue Router on Vue School</a></div>
+
 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

docs/guide/advanced/lazy-loading.md

@@ -1,5 +1,7 @@
 # Lazy Loading Routes
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-lazy-load-routes-with-vue-router?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to increase performance by lazy loading routes on Vue School">Learn how to lazy load routes with a free lesson on Vue School</a></div>
+
 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.

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
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-configure-an-authentication-middleware-route-guard-with-vue-router?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to create an authentication middleware with a global route guard on Vue School">Learn how navigation guards works with a free lesson on Vue School</a></div>
+
 You can register global before guards using `router.beforeEach`:
 
 ```js

docs/guide/advanced/scroll-behavior.md

@@ -1,5 +1,7 @@
 # Scroll Behavior
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-control-the-scroll-behavior-of-vue-router?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to control the scroll behavior on Vue School">Learn to control the scroll behavior with a free lesson on Vue School</a></div>
+
 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`.**

docs/guide/advanced/transitions.md

@@ -1,5 +1,7 @@
 # Transitions
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-create-route-transitions-with-vue-router?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to create route transitions on Vue School">Learn how to create route transitions with a free lesson on Vue School</a></div>
+
 Since the `<router-view>` is essentially a dynamic component, we can apply transition effects to it the same way using the `<transition>` component:
 
 ``` html

docs/guide/essentials/dynamic-matching.md

@@ -1,5 +1,7 @@
 # Dynamic Route Matching
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/vue-router-dynamic-routes?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to match dynamic routes with Vue School">Learn how to match dynamic routes with a free lesson on Vue School</a></div>
+
 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

docs/guide/essentials/named-routes.md

@@ -1,5 +1,7 @@
 # Named Routes
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/vue-router-named-routes-and-params?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to work with named routes and params with Vue School">Learn how to use named routes and params with a free lesson on Vue School</a></div>
+
 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

docs/guide/essentials/nested-routes.md

@@ -1,5 +1,7 @@
 # Nested Routes
 
+<div class="vueschool"><a href="https://vueschool.io/lessons/vue-router-nested-routes?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to work with nested routes with Vue School">Learn how to work with nested routes with a free lesson on Vue School</a></div>
+
 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:
 
 ```