Skip to content

Commit 1c8e802

Browse files
rahaugrahaug
authored
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
1 parent ef192c9 commit 1c8e802

11 files changed

+54
-0
lines changed

Diff for: ‎docs/.vuepress/style.styl

+33
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,36 @@
1212
margin-left 15px
1313
img, span
1414
vertical-align middle
15+
16+
.vueschool
17+
background-color #e7ecf3
18+
padding 1em 1.25em
19+
border-radius 2px
20+
color #486491
21+
position relative
22+
display flex
23+
a
24+
color #486491 !important
25+
position relative
26+
padding-left 36px
27+
&:before
28+
content ''
29+
position absolute
30+
display block
31+
width 30px
32+
height 30px
33+
top calc(50% - 15px);
34+
left -4px
35+
border-radius 50%
36+
background-color #73abfe
37+
&:after
38+
content ''
39+
position absolute
40+
display block
41+
width 0
42+
height 0
43+
top calc(50% - 5px)
44+
left 8px
45+
border-top 5px solid transparent
46+
border-bottom 5px solid transparent
47+
border-left 8px solid #fff

Diff for: ‎docs/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
For TypeScript users, `[email protected]+` requires `[email protected]+`, and vice versa.
55
:::
66

7+
<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>
8+
79
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:
810

911
- Nested route/view mapping

Diff for: ‎docs/guide/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ We will be using [ES2015](https://github.com/lukehoban/es6features) in the code
66
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).
77
:::
88

9+
<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>
10+
911
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:
1012

1113
## HTML

Diff for: ‎docs/guide/advanced/lazy-loading.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Lazy Loading Routes
22

3+
<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>
4+
35
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.
46

57
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 for: ‎docs/guide/advanced/navigation-guards.md

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ Remember that **params or query changes won't trigger enter/leave navigation gua
66

77
## Global Before Guards
88

9+
<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>
10+
911
You can register global before guards using `router.beforeEach`:
1012

1113
```js

Diff for: ‎docs/guide/advanced/scroll-behavior.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Scroll Behavior
22

3+
<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>
4+
35
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.
46

57
**Note: this feature only works if the browser supports `history.pushState`.**

Diff for: ‎docs/guide/advanced/transitions.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Transitions
22

3+
<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>
4+
35
Since the `<router-view>` is essentially a dynamic component, we can apply transition effects to it the same way using the `<transition>` component:
46

57
``` html

Diff for: ‎docs/guide/essentials/dynamic-matching.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Dynamic Route Matching
22

3+
<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>
4+
35
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:
46

57
```js

Diff for: ‎docs/guide/essentials/named-routes.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Named Routes
22

3+
<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>
4+
35
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:
46

57
``` js

Diff for: ‎docs/guide/essentials/nested-routes.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Nested Routes
22

3+
<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>
4+
35
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:
46

57
```

Diff for: ‎docs/guide/essentials/passing-props.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# Passing Props to Route Components
22

3+
<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-pass-vue-router-params-as-props-to-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to pass props to route components with Vue School">Learn how to pass props to route components with a free lesson on Vue School</a></div>
4+
5+
36
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.
47

58
To decouple this component from the router use option `props`:

0 commit comments

Comments
 (0)