From 5f6f67e444b7d85824c1a827278ba64bde9e1fd1 Mon Sep 17 00:00:00 2001
From: An Phan <me@phanan.net>
Date: Mon, 4 May 2020 23:50:06 +0200
Subject: [PATCH 1/3] migrate: routing page [WIP]

---
 src/.vuepress/config.js | 10 ++++++++-
 src/guide/routing.md    | 45 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/guide/routing.md

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 22249e30f3..b947273d4a 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -41,7 +41,15 @@ const sidebar = {
     {
       title: 'Reusability & Composition',
       collapsable: false,
-      children: ['/guide/mixins', '/guide/custom-directive']
+      children: [
+        '/guide/mixins',
+        '/guide/custom-directive'
+      ]
+    },
+    {
+      title: 'Scaling Up',
+      collapsable: false,
+      children: ['/guide/routing']
     },
     {
       title: 'Migration to Vue 3',
diff --git a/src/guide/routing.md b/src/guide/routing.md
new file mode 100644
index 0000000000..0bde576596
--- /dev/null
+++ b/src/guide/routing.md
@@ -0,0 +1,45 @@
+# Routing
+
+## Official Router
+
+For most Single Page Applications, it's recommended to use the officially-supported [vue-router library](https://github.com/vuejs/vue-router). For more details, see vue-router's [documentation](https://router.vuejs.org/).
+
+## Simple Routing from Scratch
+
+If you only need very simple routing and do not wish to involve a full-featured router library, you can do so by dynamically rendering a page-level component like this:
+
+``` js
+const NotFoundComponent = { template: '<p>Page not found</p>' }
+const HomeComponent = { template: '<p>Home page</p>' }
+const AboutComponent = { template: '<p>About page</p>' }
+
+const routes = {
+  '/': HomeComponent,
+  '/about': AboutComponent
+}
+
+const SimpleRouterApp = {
+  data: () => ({
+    currentRoute: window.location.pathname
+  }),
+
+  computed: {
+    CurrentComponent () {
+      return routes[this.currentRoute] || NotFoundComponent
+    }
+  },
+
+  render () {
+    return Vue.h(this.CurrentComponent)
+  }
+}
+
+Vue.createApp(SimpleRouterApp).mount('#app')
+```
+
+Combined with the HTML5 History API, you can build a very basic but fully-functional client-side router. To see that in practice, check out [this example app](https://github.com/phanan/vue-3.0-simple-routing-example).
+
+## Integrating 3rd-Party Routers
+
+If there's a 3rd-party router you prefer to use, such as [Page.js](https://github.com/visionmedia/page.js) or [Director](https://github.com/flatiron/director), integration is [similarly easy](https://github.com/phanan/vue-3.0-simple-routing-example/compare/master...pagejs). Here's a [complete example](https://github.com/phanan/vue-3.0-simple-routing-example/tree/pagejs) using Page.js.
+

From f7b112bfc77e5778c759891ee1115a9dc0e002c6 Mon Sep 17 00:00:00 2001
From: An Phan <me@phanan.net>
Date: Tue, 5 May 2020 08:35:56 +0200
Subject: [PATCH 2/3] migrate: link to History API

---
 src/guide/routing.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/routing.md b/src/guide/routing.md
index 0bde576596..f12f8370c6 100644
--- a/src/guide/routing.md
+++ b/src/guide/routing.md
@@ -37,7 +37,7 @@ const SimpleRouterApp = {
 Vue.createApp(SimpleRouterApp).mount('#app')
 ```
 
-Combined with the HTML5 History API, you can build a very basic but fully-functional client-side router. To see that in practice, check out [this example app](https://github.com/phanan/vue-3.0-simple-routing-example).
+Combined with the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API), you can build a very basic but fully-functional client-side router. To see that in practice, check out [this example app](https://github.com/phanan/vue-3.0-simple-routing-example).
 
 ## Integrating 3rd-Party Routers
 

From 2269509f344e6bbaa18268681dc097d0b33a6aac Mon Sep 17 00:00:00 2001
From: An Phan <me@phanan.net>
Date: Tue, 5 May 2020 08:36:49 +0200
Subject: [PATCH 3/3] migrate: minor wording change

---
 src/guide/routing.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/guide/routing.md b/src/guide/routing.md
index f12f8370c6..8c86196332 100644
--- a/src/guide/routing.md
+++ b/src/guide/routing.md
@@ -41,5 +41,4 @@ Combined with the [History API](https://developer.mozilla.org/en-US/docs/Web/API
 
 ## Integrating 3rd-Party Routers
 
-If there's a 3rd-party router you prefer to use, such as [Page.js](https://github.com/visionmedia/page.js) or [Director](https://github.com/flatiron/director), integration is [similarly easy](https://github.com/phanan/vue-3.0-simple-routing-example/compare/master...pagejs). Here's a [complete example](https://github.com/phanan/vue-3.0-simple-routing-example/tree/pagejs) using Page.js.
-
+If there's a 3rd-party router you prefer to use, such as [Page.js](https://github.com/visionmedia/page.js) or [Director](https://github.com/flatiron/director), integration is [similarly straightforward](https://github.com/phanan/vue-3.0-simple-routing-example/compare/master...pagejs). Here's a [complete example](https://github.com/phanan/vue-3.0-simple-routing-example/tree/pagejs) using Page.js.