docs: add feat set parent

readme.md

@@ -5,6 +5,15 @@
 
 [![npm downloads](https://img.shields.io/npm/dm/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)[![npm](https://img.shields.io/npm/dt/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)
 
+## Support
+- Setting parent route without need to actually nest it in children array
+- Customized template
+- Dynamic breadcrumbs 
+- Dynamic label 
+- Shorthand labeling (`breadcrumb: 'Page Label'`)
+- Sub-routing
+
+
 ## Install
 
 ```bash
@@ -75,6 +84,16 @@ const router = new VueRouter({
             return `name "${name}" of context route`;
         }
       }
+    },
+    {
+      path: '/parent',
+      component: { template: '<router-view/>' },
+      meta: {
+        breadcrumb: {
+          label: 'Parent to Params',
+          parent: 'Params'
+        }
+      },
     }
   ]
 });

src/docs/src/App.vue

@@ -24,6 +24,11 @@
             </ul>
           </li>
         </ul>
+        <ul>
+          <li>
+            <router-link to="/parent">Parent</router-link>
+          </li>
+        </ul>
       </div>
     </nav>
     <main>
@@ -59,12 +64,12 @@ li {text-align: left;}
   color: #2c3e50;
   content: '/';
 }
-.breadcrumb-item .active {
+.breadcrumb-item a {
   font-weight: bold;
   color: #2c3e50;
   text-decoration: none;
 }
-.router-link-exact-active.active {
+.breadcrumb-item span {
   color: #42b983;
 }
 main {

src/docs/src/router/index.ts

@@ -106,6 +106,16 @@ const routes: Array<RouteConfig> = [
           ]
       }
     ]
+  },
+  {
+    path: '/parent',
+    component: { template: '<router-view/>' },
+    meta: {
+      breadcrumb: {
+        label: 'Parent to settings',
+        parent: 'settings'
+      }
+    },
   }
 ]