#1275 for breadcrumb

api-generator/components/breadcrumb.js

@@ -10,6 +10,12 @@ const BreadcrumbProps = [
         type: "menuitem",
         default: "null",
         description: "Configuration for the home icon."
+    },
+    {
+        name: "exact",
+        type: "boolean",
+        default: "true",
+        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
     }
 ];
 

src/components/breadcrumb/Breadcrumb.d.ts

@@ -1,6 +1,7 @@
 interface BreadcrumbProps {
     home?: any;
     model?: any[];
+    exact?: boolean;
 }
 
 declare class Breadcrumb {

src/components/breadcrumb/Breadcrumb.vue

@@ -1,10 +1,10 @@
 <template>
     <nav class="p-breadcrumb p-component" aria-label="Breadcrumb">
         <ul>
-            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :template="$slots.item"/>
+            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :template="$slots.item" :exact="exact" />
             <template v-for="item of model" :key="item.label">
                 <li class="p-breadcrumb-chevron pi pi-chevron-right"></li>
-                <BreadcrumbItem :item="item" :template="$slots.item" />
+                <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" />
             </template>
         </ul>
     </nav>
@@ -23,6 +23,10 @@ export default {
         home: {
             type: null,
             default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     components: {

src/components/breadcrumb/BreadcrumbItem.vue

@@ -1,13 +1,13 @@
 <template>
     <li :class="containerClass(item)" v-if="visible()">
         <template v-if="!template">
-            <router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href}">
-                <a :href="href" class="p-menuitem-link" @click="onClick($event, navigate)">
+            <router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                <a :href="href" :class="linkClass({isActive, isExactActive})" @click="onClick($event, navigate)">
                     <span v-if="item.icon" :class="iconClass"></span>
                     <span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
+            <a v-else :href="item.url||'#'" :class="linkClass()" @click="onClick" :target="item.target">
                 <span v-if="item.icon" :class="iconClass"></span>
                 <span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
             </a>
@@ -21,7 +21,8 @@ export default {
     name: 'BreadcrumbItem',
     props: {
         item: null,
-        template: null
+        template: null,
+        exact: null
     },
     methods: {
         onClick(event, navigate) {
@@ -39,6 +40,12 @@ export default {
         containerClass(item) {
             return [{'p-disabled': this.disabled(item)}, this.item.class];
         },
+        linkClass(routerProps) {
+            return ['p-menuitem-link', {
+                'router-link-active': routerProps && routerProps.isActive,
+                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+            }];
+        },
         visible() {
             return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
         },

src/views/breadcrumb/BreadcrumbDoc.vue

@@ -43,6 +43,18 @@ export default {
     </template>
 </Breadcrumb>
 </template>
+</code></pre>
+
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+<pre v-code><code><template v-pre>
+&lt;Breadcrumb :home="home" :model="items"&gt;
+    &lt;template #item="{item}"&gt;
+        &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+            &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
+        &lt;/router-link&gt;
+    &lt;/template&gt;
+&lt;/Breadcrumb&gt;
+</template>
 </code></pre>
 
         <h5>Properties</h5>
@@ -69,6 +81,12 @@ export default {
                         <td>menuitem</td>
                         <td>null</td>
                         <td>Configuration for the home icon.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
                     </tr>
 				</tbody>
 			</table>