Componente de navegação do pacote Vue3 + TypeScript
Breadcrumbs são um componente de navegação comum, geralmente usado para exibir a localização da página atual, permitindo que os usuários saibam sua localização a qualquer momento. Este artigo apresentará como usar Vue3 e TypeScript para agrupar um componente breadcrumb.
1. Crie o componente breadcrumb
Primeiro precisamos criar um componente Vue3 para implementar a funcionalidade breadcrumbs. Neste componente, precisamos receber um routesarray como parâmetro e então gerar breadcrumbs com base nas informações de roteamento.
ver
cópia de
<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>
Neste componente, usamos um routesatributo props chamado para receber informações de roteamento. No template do componente, usamos v-fora diretiva para iterar sobre routeso array e gerar o breadcrumb correspondente. Usamos router-linko componente para implementar saltos de roteamento e adicionamos uma barra separadora entre cada trilha de navegação.
2. Use o componente breadcrumb
Após criar o componente breadcrumb, podemos utilizá-lo em outros componentes. Por exemplo, podemos App.vueusar o componente breadcrumb no componente para mostrar onde a página atual está localizada.
ver
cópia de
<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>
Neste exemplo, App.vueusamos computedas funções e setupno componente para calcular a posição da página atual. Primeiro usamos useRoutea função para obter as informações da rota atual e, em seguida, definimos uma routespropriedade computada nomeada para calcular as informações da rota atual e sua rota pai. Usamos whileum loop para percorrer a rota atual e sua rota pai, adicionando-as à routesmatriz por sua vez. Por fim, routespassamos esse array como props para o componente breadcrumbs para gerar o breadcrumbs correspondente.
3. Resumo
Neste artigo, apresentamos como encapsular um componente breadcrumb usando Vue3 e TypeScript. Por meio desse componente, podemos gerar facilmente vários breadcrumbs complexos, permitindo que os usuários saibam sua localização a qualquer momento. Ao mesmo tempo, desenvolver com Vue3 e TypeScript nos permite criar aplicativos com mais eficiência.