vue3-实现点击右侧标签显示内容

在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;