Vue3 + TypeScript package breadcrumb component
Breadcrumbs are a common navigation component, usually used to display the location of the current page, allowing users to know their location at any time. This article will introduce how to use Vue3 and TypeScript to wrap a breadcrumb component.
1. Create the breadcrumb component
We first need to create a Vue3 component to implement the breadcrumbs functionality. In this component, we need to receive an routesarray as a parameter, and then generate breadcrumbs based on routing information.
vue
Copy
<template>
<div class="breadcrumb">
<ul>
<li v-for="(route, index) in routes" :key="route.path">
<router-link :to="route.path">{
{ route.meta.title }}</router-link>
<span v-if="index !== routes.length - 1">/</span>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { RouteRecordRaw } from 'vue-router'
export default defineComponent({
name: 'Breadcrumb',
props: {
routes: {
type: Array as PropType<RouteRecordRaw[]>,
required: true,
default: () => []
}
}
})
</script>
In this component, we use a routesprops attribute called to receive routing information. In the component's template, we use v-forthe directive to iterate over routesthe array and generate the corresponding breadcrumbs. We used router-linkthe component to implement routing jumps, and added a slash separator between each breadcrumb.
2. Use the breadcrumb component
After creating the breadcrumb component, we can use it in other components. For example, we can App.vueuse the breadcrumb component in the component to show where the current page is located.
vue
Copy
<template>
<div>
<breadcrumb :routes="routes"></breadcrumb>
<router-view></router-view>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import Breadcrumb from './Breadcrumb.vue'
import { RouteRecordRaw, useRoute } from 'vue-router'
export default defineComponent({
name: 'App',
components: {
Breadcrumb
},
setup() {
const route = useRoute()
const routes = computed(() => {
const routes: RouteRecordRaw[] = []
let currentRoute = route.value
while (currentRoute) {
routes.unshift(currentRoute)
currentRoute = currentRoute.parent as RouteRecordRaw
}
return routes
})
return { routes }
}
})
</script>
In this example, we App.vueuse computedthe and setupfunctions in the component to calculate the position of the current page. We first use useRoutethe function to get the current route information, and then define a routescomputed property named to calculate the information of the current route and its parent route. We used whilea loop to traverse the current route and its parent route, adding them to routesthe array in turn. Finally, we routespass this array as props to the breadcrumbs component to generate the corresponding breadcrumbs.
3. Summary
In this article, we introduced how to wrap a breadcrumb component using Vue3 and TypeScript. Through this component, we can easily generate various complex breadcrumbs to let users know their location at any time. At the same time, developing with Vue3 and TypeScript allows us to build applications more efficiently.