在TagCloud.vue中添加链接,如下:
<script setup>
import { ref } from "vue";
const tags=ref([]);
const tagSet=new Set();
const props = defineProps({
posts:Array,
});
console.log(props.posts);
alert(props.posts.length);
props.posts.forEach((item)=>{
item.tags.forEach((tag)=>
tagSet.add(tag)
)
});
tags.value=[...tagSet];
</script>
<template>
<div class="tag-cloud">
<h3>标签</h3>
<div v-for="tag in tags" :key="tag">
<router-link :to="{name:'Tag',params:tag}">#{{tag}}</router-link>
</div>
</div>
</template>
<style scoped>
.tag-cloud{
padding:10px;
}
.tag-cloud h3{
border-bottom:1px solid #eee;
padding:16px 8px;
color:#444;
}
.tag-cloud div{
display: inline-block;
padding:10px;
}
.tag-cloud a{
color:#ccc;
text-decoration: none;
}
</style>
在views文件夹下创建Tag.vue组件,如下:
<script setup>
import {ref} from "vue";
</script>
<template>
<div>tag</div>
</template>
<style scoped>
</style>
在index.js中添加这个路由:
import {createRouter,createWebHistory} from "vue-router";
import Home from "../views/Home.vue";
import Details from "../views/Details.vue";
import Create from "../views/Create.vue";
import Tag from "../views/Tag.vue";
const routes=[
{path:"/",name:"Home",component:Home},
{path:"/posts/:id",name:"Details",component:Details,props:true},
{path:"/create",name:"Create",component:Create},
{path:"/tag",name:"Tag",component:Tag},
];
const router=createRouter({
history:createWebHistory(),
routes
})
export default router;