docs: add 4 Vue School links to docs (#1001)

diff --git a/docs/guide/advanced/composition-api.md b/docs/guide/advanced/composition-api.md
index c0b41d6a3dddc260e86dcba5b77f9ff2c2a21b0f..18a0654e562d3962b0a99c50831714d29a1c0339 100644 (file)
--- a/docs/guide/advanced/composition-api.md
+++ b/docs/guide/advanced/composition-api.md
@@ -1,5 +1,10 @@
 # Vue Router and the Composition API
 
+<VueSchoolLink 
+  href="https://vueschool.io/lessons/router-and-the-composition-api"
+  title="Learn how to use Vue Router with the composition API"
+/>
+
 The introduction of `setup` and Vue's [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html), open up new possibilities but to be able to get the full potential out of Vue Router, we will need to use a few new functions to replace access to `this` and in-component navigation guards.
 
 ## Accessing the Router and current Route inside `setup`

diff --git a/docs/guide/advanced/extending-router-link.md b/docs/guide/advanced/extending-router-link.md
index 592e079d54049d453d61fc057395728c9945f991..1603a2fd901a7900bcaf15334347a286c212fd00 100644 (file)
--- a/docs/guide/advanced/extending-router-link.md
+++ b/docs/guide/advanced/extending-router-link.md
@@ -1,5 +1,10 @@
 # Extending RouterLink
 
+<VueSchoolLink 
+  href="https://vueschool.io/lessons/extending-router-link-for-external-urls"
+  title="Learn how to extend router-link"
+/>
+
 The RouterLink component exposes enough `props` to suffice most basic applications but it doesn't try to cover every possible use case and you will likely find yourself using `v-slot` for some advanced cases. In most medium to large sized applications, it's worth creating one if not multiple custom RouterLink components to reuse them across your application. Some examples are Links in a Navigation Menu, handling external links, adding an `inactive-class`, etc.
 
 Let's extend RouterLink to handle external links as well and adding a custom `inactive-class` in an `AppLink.vue` file:

diff --git a/docs/guide/advanced/meta.md b/docs/guide/advanced/meta.md
index 1f55f485ce1809c2b838015e1ba60d19bbb324f5..869178db0b2ac2ef7b5aae45b942074e670425d3 100644 (file)
--- a/docs/guide/advanced/meta.md
+++ b/docs/guide/advanced/meta.md
@@ -1,5 +1,10 @@
 # Route Meta Fields
 
+<VueSchoolLink 
+  href="https://vueschool.io/lessons/route-meta-fields"
+  title="Learn how to use route meta fields"
+/>
+
 Sometimes, you might want to attach arbitrary information to routes like transition names, who can access the route, etc. This can be achieved through the `meta` property which accepts an object of properties and can be accessed on the route location and navigation guards. You can define `meta` properties like this:
 
 ```js

diff --git a/docs/guide/advanced/scroll-behavior.md b/docs/guide/advanced/scroll-behavior.md
index c5fc0506fd4f39fa4796f463ed1ecc6b1d812bf8..32746c1962ce083f61d14e20a85555b36c188c06 100644 (file)
--- a/docs/guide/advanced/scroll-behavior.md
+++ b/docs/guide/advanced/scroll-behavior.md
@@ -1,5 +1,10 @@
 # Scroll Behavior
 
+<VueSchoolLink 
+  href="https://vueschool.io/lessons/scroll-behavior"
+  title="Learn how to customize scroll behavior"
+/>
+
 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`.**