我正在嘗試構建一個 Breadcrumbs 組件，根據我當前的 URL 動態生成鏈接
前任。
http://localhost:8080/car/create
我的面包屑應該看起來像
首頁 > 汽車 > 創造
前任。
http://localhost:8080/car/ford
我的面包屑應該看起來像
首頁 > 汽車 > 福特
前任。
http://localhost:8080/car/ford/raptor
我的面包屑應該看起來像
首頁 > 汽車 > 福特 > 猛禽
如何動態地構建這樣的東西？
我有
<template lang="">
<v-row>
<v-breadcrumbs :items="links" class="black--text">
<template v-slot:divider>
<v-icon>mdi-chevron-right</v-icon>
</template>
</v-breadcrumbs>
</v-row>
</template>
<script>
export default {
name: 'Breadcrumbs',
props: {
title: String
},
data() {
return {
links: [
{
text: 'Home',
disabled: false,
href: '/'
},
{
text: this.title,
disabled: true,
href: 'breadcrumbs_link_2'
}
]
}
}
}
</script>
uj5u.com熱心網友回復：
您需要實作computed如下屬性：
const breadcrumb = Vue.component('breadcrumb', {
template: '#breadcrumb',
props: { title: String },
computed: {
links: function() {
return [
{ text: 'Home', disabled: false, href: '/' },
{ text: this.title, disabled: true, href: 'breadcrumbs_link_2' },
...(
(new URL(window.location.href))
.pathname
.split('/')
.slice(1)
.map(seg => ({ text: seg, disabled: false, href: seg }))
)
];
}
}
});
new Vue({ el:"#app", vuetify: new Vuetify(), components: { breadcrumb } });<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<template id="breadcrumb">
<v-row>
<v-breadcrumbs :items="links" class="black--text">
<template v-slot:divider><v-icon>mdi-chevron-right</v-icon></template>
</v-breadcrumbs>
</v-row>
</template>
<v-app id="app">
<breadcrumb title="title_1" />
</v-app>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/388467.html
標籤：javascript Vue.js Vuejs2 Vue 组件 Vuetify.js
上一篇：Vue.js即時搜索-控制臺錯誤-無法在InstantSearch上呼叫.use
下一篇：Vuejs：訪問特定的URL段