docs: update referral

Author: posva

docs/guide/README.md

@@ -6,7 +6,7 @@ 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>
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuerouter" 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 feels natural: 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:
 

docs/guide/advanced/lazy-loading.md

@@ -1,6 +1,6 @@
 # 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>
+<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-lazy-load-routes-with-vue-router?friend=vuerouter" 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.
 

docs/guide/advanced/navigation-guards.md

@@ -6,7 +6,7 @@ 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>
+<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-configure-an-authentication-middleware-route-guard-with-vue-router?friend=vuerouter" 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`:
 
@@ -100,20 +100,20 @@ Finally, you can directly define route navigation guards inside route components
 ```js
 const Foo = {
   template: `...`,
-  beforeRouteEnter (to, from, next) {
+  beforeRouteEnter(to, from, next) {
     // called before the route that renders this component is confirmed.
     // does NOT have access to `this` component instance,
     // because it has not been created yet when this guard is called!
   },
-  beforeRouteUpdate (to, from, next) {
+  beforeRouteUpdate(to, from, next) {
     // called when the route that renders this component has changed.
     // This component being reused (by using an explicit `key`) in the new route or not doesn't change anything.
     // For example, for a route with dynamic params `/foo/:id`, when we
     // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
     // will be reused (unless you provided a `key` to `<router-view>`), and this hook will be called when that happens.
     // has access to `this` component instance.
   },
-  beforeRouteLeave (to, from, next) {
+  beforeRouteLeave(to, from, next) {
     // called when the route that renders this component is about to
     // be navigated away from.
     // has access to `this` component instance.
@@ -133,7 +133,7 @@ beforeRouteEnter (to, from, next) {
 }
 ```
 
-Note that `beforeRouteEnter` is the only guard that supports passing a callback to `next`. For `beforeRouteUpdate` and `beforeRouteLeave`, `this` is already available, so passing a callback is unnecessary and therefore *not supported*:
+Note that `beforeRouteEnter` is the only guard that supports passing a callback to `next`. For `beforeRouteUpdate` and `beforeRouteLeave`, `this` is already available, so passing a callback is unnecessary and therefore _not supported_:
 
 ```js
 beforeRouteUpdate (to, from, next) {
@@ -162,7 +162,7 @@ If you are using mixins that add in-component navigation guards, make sure to ad
 Vue.use(Router)
 
 Vue.mixin({
-  beforeRouteUpdate(to, from ,next) {
+  beforeRouteUpdate(to, from, next) {
     // ...
   }
 })

docs/guide/advanced/scroll-behavior.md

@@ -1,14 +1,14 @@
 # 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>
+<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-control-the-scroll-behavior-of-vue-router?friend=vuerouter" 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`.**
 
 When creating the router instance, you can provide the `scrollBehavior` function:
 
-``` js
+```js
 const router = new VueRouter({
   routes: [...],
   scrollBehavior (to, from, savedPosition) {
@@ -28,7 +28,7 @@ If a falsy value or an empty object is returned, no scrolling will happen.
 
 For example:
 
-``` js
+```js
 scrollBehavior (to, from, savedPosition) {
   return { x: 0, y: 0 }
 }
@@ -38,7 +38,7 @@ This will simply make the page scroll to top for all route navigations.
 
 Returning the `savedPosition` will result in a native-like behavior when navigating with back/forward buttons:
 
-``` js
+```js
 scrollBehavior (to, from, savedPosition) {
   if (savedPosition) {
     return savedPosition
@@ -50,7 +50,7 @@ scrollBehavior (to, from, savedPosition) {
 
 If you want to simulate the "scroll to anchor" behavior:
 
-``` js
+```js
 scrollBehavior (to, from, savedPosition) {
   if (to.hash) {
     return {
@@ -69,7 +69,7 @@ We can also use [route meta fields](meta.md) to implement fine-grained scroll be
 
 You can also return a Promise that resolves to the desired position descriptor:
 
-``` js
+```js
 scrollBehavior (to, from, savedPosition) {
   return new Promise((resolve, reject) => {
     setTimeout(() => {

docs/guide/advanced/transitions.md

@@ -1,10 +1,10 @@
 # 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>
+<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-create-route-transitions-with-vue-router?friend=vuerouter" 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
+```html
 <transition>
   <router-view></router-view>
 </transition>
@@ -16,7 +16,7 @@ Since the `<router-view>` is essentially a dynamic component, we can apply trans
 
 The above usage will apply the same transition for all routes. If you want each route's component to have different transitions, you can instead use `<transition>` with different names inside each route component:
 
-``` js
+```js
 const Foo = {
   template: `
     <transition name="slide">
@@ -38,14 +38,14 @@ const Bar = {
 
 It is also possible to determine the transition to use dynamically based on the relationship between the target route and current route:
 
-``` html
+```html
 <!-- use a dynamic transition name -->
 <transition :name="transitionName">
   <router-view></router-view>
 </transition>
 ```
 
-``` js
+```js
 // then, in the parent component,
 // watch the `$route` to determine the transition to use
 watch: {

docs/guide/essentials/dynamic-matching.md

@@ -1,6 +1,6 @@
 # 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>
+<div class="vueschool"><a href="https://vueschool.io/lessons/vue-router-dynamic-routes?friend=vuerouter" 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:
 
@@ -60,7 +60,7 @@ Or, use the `beforeRouteUpdate` [navigation guard](../advanced/navigation-guards
 ```js
 const User = {
   template: '...',
-  beforeRouteUpdate (to, from, next) {
+  beforeRouteUpdate(to, from, next) {
     // react to route changes...
     // don't forget to call next()
   }

docs/guide/essentials/named-routes.md

@@ -1,10 +1,10 @@
 # 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>
+<div class="vueschool"><a href="https://vueschool.io/lessons/vue-router-named-routes-and-params?friend=vuerouter" 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
+```js
 const router = new VueRouter({
   routes: [
     {
@@ -18,14 +18,14 @@ const router = new VueRouter({
 
 To link to a named route, you can pass an object to the `router-link` component's `to` prop:
 
-``` html
+```html
 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
 ```
 
 This is the exact same object used programmatically with `router.push()`:
 
-``` js
-router.push({ name: 'user', params: { userId: 123 }})
+```js
+router.push({ name: 'user', params: { userId: 123 } })
 ```
 
 In both cases, the router will navigate to the path `/user/123`.

docs/guide/essentials/nested-routes.md

@@ -1,6 +1,6 @@
 # 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>
+<div class="vueschool"><a href="https://vueschool.io/lessons/vue-router-nested-routes?friend=vuerouter" 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:
 
@@ -19,27 +19,25 @@ With `vue-router`, it is very simple to express this relationship using nested r
 
 Given the app we created in the last chapter:
 
-``` html
+```html
 <div id="app">
   <router-view></router-view>
 </div>
 ```
 
-``` js
+```js
 const User = {
   template: '<div>User {{ $route.params.id }}</div>'
 }
 
 const router = new VueRouter({
-  routes: [
-    { path: '/user/:id', component: User }
-  ]
+  routes: [{ path: '/user/:id', component: User }]
 })
 ```
 
 The `<router-view>` here is a top-level outlet. It renders the component matched by a top level route. Similarly, a rendered component can also contain its own, nested `<router-view>`. For example, if we add one inside the `User` component's template:
 
-``` js
+```js
 const User = {
   template: `
     <div class="user">
@@ -52,10 +50,12 @@ const User = {
 
 To render components into this nested outlet, we need to use the `children` option in `VueRouter` constructor config:
 
-``` js
+```js
 const router = new VueRouter({
   routes: [
-    { path: '/user/:id', component: User,
+    {
+      path: '/user/:id',
+      component: User,
       children: [
         {
           // UserProfile will be rendered inside User's <router-view>
@@ -81,15 +81,16 @@ As you can see the `children` option is just another Array of route configuratio
 
 At this point, with the above configuration, when you visit `/user/foo`, nothing will be rendered inside `User`'s outlet, because no sub route is matched. Maybe you do want to render something there. In such case you can provide an empty subroute path:
 
-``` js
+```js
 const router = new VueRouter({
   routes: [
     {
-      path: '/user/:id', component: User,
+      path: '/user/:id',
+      component: User,
       children: [
         // UserHome will be rendered inside User's <router-view>
         // when /user/:id is matched
-        { path: '', component: UserHome },
+        { path: '', component: UserHome }
 
         // ...other sub routes
       ]

docs/guide/essentials/passing-props.md

@@ -1,6 +1,6 @@
 # Passing Props to Route Components
 
-<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>
+<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-pass-vue-router-params-as-props-to-components?friend=vuerouter" 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>
 
 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.
 

docs/ja/README.md

@@ -6,7 +6,7 @@ actionLink: /ja/installation.html
 footer: MIT Licensed | Copyright © 2014-present Evan You, Eduardo San Martin Morote
 ---
 
-<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>
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuerouter" 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 は [Vue.js](http://vuejs.org) 公式ルータです。これは Vue.js のコアと深く深く統合されており、Vue.js でシングルページアプリケーションを構築します。機能は次の通りです:
 

docs/ja/guide/README.md

@@ -1,18 +1,18 @@
 # はじめに
 
 ::: tip Note
- ガイド内のコードのサンプルは [ES2015](https://github.com/lukehoban/es6features) を使っています。
+ガイド内のコードのサンプルは [ES2015](https://github.com/lukehoban/es6features) を使っています。
 
 すべての example では、vue の完全バージョンを使用してテンプレートを解析可能にしています。詳細は[こちら](https://jp.vuejs.org/v2/guide/installation.html#ランタイム-コンパイラとランタイム限定の違い)を参照してください。
 :::
 
-<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>
+<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuerouter" 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.js と vue-router を使ったシングルページアプリケーションの構築は驚くほど簡単です。Vue.js のコンポーネントを使ってアプリケーションを既に構成しています。vue-router を混ぜ込むには、コンポーネントとルートをマッピングさせて vue-router にどこで描画するかを知らせるだけです。以下が基本的な例です。
 
 ## HTML
 
-``` html
+```html
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 
@@ -33,7 +33,7 @@ Vue.js と vue-router を使ったシングルページアプリケーション
 
 ## JavaScript
 
-``` js
+```js
 // 0. モジュールシステムを使っている場合 (例: vue-cli 経由で)、Vue と VueRouter をインポートし、`Vue.use(VueRouter)` を呼び出します。
 
 // 1. ルートコンポーネントを定義します
@@ -74,7 +74,7 @@ const app = new Vue({
 // Home.vue
 export default {
   computed: {
-    username () {
+    username() {
       // `params` が表示される
       return this.$route.params.username
     }