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 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 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 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 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`: