From 9d1ce7b83cea43961099e67c33c5ab5450d1f467 Mon Sep 17 00:00:00 2001
From: svmi3195 <target1983@gmail.com>
Date: Wed, 3 Jul 2019 16:52:54 +0300
Subject: [PATCH] guide: add an article on vue-router (#27746)

* create markdown file for the article

* guide: add an article for vue router

* change some wording

* fix typo

* change some wording

* add a bit on injection router to the app

* change some wording

* add title

* fix/suggested-changes
---
 guide/english/vue/router/index.md | 56 +++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 guide/english/vue/router/index.md

diff --git a/guide/english/vue/router/index.md b/guide/english/vue/router/index.md
new file mode 100644
index 0000000000..41b933c53f
--- /dev/null
+++ b/guide/english/vue/router/index.md
@@ -0,0 +1,56 @@
+---
+title: Router
+---
+
+## Introduction
+Vue router is the official router for Vue.js. With it you can easily create your Single Page Apps.
+
+## Basics
+If you want to use Vue Router in your app, first you'll need to inject it in your root instance to make your whole application aware of the router.
+```javascript
+new Vue({
+  el: '#app',
+  router,
+  render: h => h(App)
+})
+```
+Now, to use the power of Vue Router all you need to do is map Vue.js componenets with routes and specify where to render them.
+For example, your main template may look like that:
+```javascript
+<template>
+  <div id="app">
+    <app-header></app-header>
+    <router-view></router-view>
+    <app-footer></app-footer>
+  </div>
+</template>
+```
+Then in `<router-view />` place it will render a component which is specified for this route. We map components to routes in router itself:
+```javascript
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from '@/components/Home'
+import Contacts from '@/components/Contacts'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: Home
+    },
+    {
+      path: '/contacts',
+      name: 'Contacts',
+      component: Contacts
+    }
+  ]
+})
+```
+You can add as many routes as you need. It is also possible to use wildcards, aliases, redirects, dynamic route mapping, etc.
+
+## Read more
+- [Vue Router official docs](https://router.vuejs.org/)
+- [Vue Router's Github repository](https://github.com/vuejs/vue-router)