From 5f85314a39a013380347cc1ae9be09c37f15b695 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 3 Sep 2019 02:29:20 -0300
Subject: [PATCH 1/6] docs(b-nav): add example markup for using
 vue-router/nuxt-child (closes #3999)

---
 src/components/nav/README.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/components/nav/README.md b/src/components/nav/README.md
index 3a9b449e856..771a1bbcf25 100644
--- a/src/components/nav/README.md
+++ b/src/components/nav/README.md
@@ -316,6 +316,39 @@ The `card-header` prop is only needed when you are applying `tabs` or `pills` st
 
 The `card-header` prop has no effect if the `<b-nav>` is `vertical`.
 
+### using with Vue Router
+
+Have your card nav-tabs control vue router nested routes via `<router-view>` or `<nuxt-child>`
+components:
+
+```html
+// On page with route `/some/route`
+<div>
+  <b-card title="Card Title" body-class="text-center">
+    <template v-slot:header>
+      <b-nav card-header tabs>
+        <!-- b-nav-item's with child routes. Note the trailing slash on the first b-nav-item -->
+        <b-nav-item to="/some/route/" exact exact-active-class="active">Active</b-nav-item>
+        <b-nav-item to="/some/route/foo" exact exact-active-class="active">Foo</b-nav-item>
+        <b-nav-item to="/some/route/bar" exact exact-active-class="active">Bar</b-nav-item>
+      </b-nav>
+    </template>
+
+    <!-- child route gets rendered in <router-view or nuxt-child -->
+    <router-view></router-view>
+    <!-- Or if using Nuxt.js
+    <nuxt-child></nuxt-child>
+    -->
+  </b-card>
+</div>
+```
+
+For more details see:
+
+- [Vue Router `<router-view>`](https://router.vuejs.org/api/#router-view)
+- [Nuxt.JS `<nuxt-child>`](https://nuxtjs.org/api/components-nuxt-child)
+
+
 ## Accessibility
 
 If you're using `<b-nav>` to provide a navigation bar, be sure to add a `role="navigation"` to the

From 1b0aaaa601959a73cdcf9199eb6af723eb330db7 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 3 Sep 2019 02:55:28 -0300
Subject: [PATCH 2/6] Update README.md

---
 src/components/nav/README.md | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/nav/README.md b/src/components/nav/README.md
index 771a1bbcf25..21dc1415563 100644
--- a/src/components/nav/README.md
+++ b/src/components/nav/README.md
@@ -316,7 +316,7 @@ The `card-header` prop is only needed when you are applying `tabs` or `pills` st
 
 The `card-header` prop has no effect if the `<b-nav>` is `vertical`.
 
-### using with Vue Router
+### Using with Vue Router
 
 Have your card nav-tabs control vue router nested routes via `<router-view>` or `<nuxt-child>`
 components:
@@ -334,7 +334,7 @@ components:
       </b-nav>
     </template>
 
-    <!-- child route gets rendered in <router-view or nuxt-child -->
+    <!-- child route gets rendered in <router-view> or <nuxt-child> -->
     <router-view></router-view>
     <!-- Or if using Nuxt.js
     <nuxt-child></nuxt-child>
@@ -343,12 +343,31 @@ components:
 </div>
 ```
 
+Note Vue Router does not support defining active routes with hashes (`#`), which is why you must
+define the "tab" content as child routes.
+
+**Example router config for above:**
+
+```js
+const routes = [
+  {
+    path: '/some/route',
+    component: SomeRouteComponent,
+    // Child route "tabs"
+    children: [
+      { path: '', component: DefaultTabComponent },
+      { path: 'foo', component: FooTabComponent },
+      { path: 'bar', component: BarTabComponent }
+    ]
+  }
+]
+```
+
 For more details see:
 
 - [Vue Router `<router-view>`](https://router.vuejs.org/api/#router-view)
 - [Nuxt.JS `<nuxt-child>`](https://nuxtjs.org/api/components-nuxt-child)
 
-
 ## Accessibility
 
 If you're using `<b-nav>` to provide a navigation bar, be sure to add a `role="navigation"` to the

From a6e87bcdce59fe6c82d43c19be172c4026c7fa6a Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 3 Sep 2019 02:57:17 -0300
Subject: [PATCH 3/6] Update README.md

---
 src/components/nav/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/nav/README.md b/src/components/nav/README.md
index 21dc1415563..2101c99bec6 100644
--- a/src/components/nav/README.md
+++ b/src/components/nav/README.md
@@ -318,8 +318,8 @@ The `card-header` prop has no effect if the `<b-nav>` is `vertical`.
 
 ### Using with Vue Router
 
-Have your card nav-tabs control vue router nested routes via `<router-view>` or `<nuxt-child>`
-components:
+Have your card `<b-nav>` control vue router nested routes via `<router-view>` or `<nuxt-child>`
+components, to created tabbed content that changes with route URL:
 
 ```html
 // On page with route `/some/route`

From 588d959067016de78deb2fc75b61d08af8df1136 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 3 Sep 2019 02:59:53 -0300
Subject: [PATCH 4/6] Update README.md

---
 src/components/nav/README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/nav/README.md b/src/components/nav/README.md
index 2101c99bec6..6d354521561 100644
--- a/src/components/nav/README.md
+++ b/src/components/nav/README.md
@@ -348,6 +348,8 @@ define the "tab" content as child routes.
 
 **Example router config for above:**
 
+<!-- eslint-disable no-unused-vars, no-undef -->
+
 ```js
 const routes = [
   {

From 0bc6e212553a182654ae3c6a5fbc3a9431efad87 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 3 Sep 2019 03:23:58 -0300
Subject: [PATCH 5/6] Update README.md

---
 src/components/nav/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/nav/README.md b/src/components/nav/README.md
index 6d354521561..16d8e451a2a 100644
--- a/src/components/nav/README.md
+++ b/src/components/nav/README.md
@@ -365,6 +365,10 @@ const routes = [
 ]
 ```
 
+One can also use Vue Router
+[named routes](https://router.vuejs.org/guide/essentials/named-routes.html#named-routes) and/or
+route params instead of path based routes.
+
 For more details see:
 
 - [Vue Router `<router-view>`](https://router.vuejs.org/api/#router-view)

From cdb89d505beeec4fa8e0af249dba2f91146baec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Tue, 3 Sep 2019 08:29:48 +0200
Subject: [PATCH 6/6] Update README.md

---
 src/components/nav/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/nav/README.md b/src/components/nav/README.md
index 6d354521561..30986bad7ce 100644
--- a/src/components/nav/README.md
+++ b/src/components/nav/README.md
@@ -327,14 +327,14 @@ components, to created tabbed content that changes with route URL:
   <b-card title="Card Title" body-class="text-center">
     <template v-slot:header>
       <b-nav card-header tabs>
-        <!-- b-nav-item's with child routes. Note the trailing slash on the first b-nav-item -->
+        <!-- <b-nav-item>'s with child routes. Note the trailing slash on the first <b-nav-item> -->
         <b-nav-item to="/some/route/" exact exact-active-class="active">Active</b-nav-item>
         <b-nav-item to="/some/route/foo" exact exact-active-class="active">Foo</b-nav-item>
         <b-nav-item to="/some/route/bar" exact exact-active-class="active">Bar</b-nav-item>
       </b-nav>
     </template>
 
-    <!-- child route gets rendered in <router-view> or <nuxt-child> -->
+    <!-- Child route gets rendered in <router-view> or <nuxt-child> -->
     <router-view></router-view>
     <!-- Or if using Nuxt.js
     <nuxt-child></nuxt-child>
@@ -343,7 +343,7 @@ components, to created tabbed content that changes with route URL:
 </div>
 ```
 
-Note Vue Router does not support defining active routes with hashes (`#`), which is why you must
+Note: Vue Router does not support defining active routes with hashes (`#`), which is why you must
 define the "tab" content as child routes.
 
 **Example router config for above:**