这个在views文件夹下面创建一个Details.vue，如下：
<script setup>
</script>
<template>
<div>details</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";
const routes=[
{path:"/",name:"Home",component:Home},
{path:"/posts",name:"Details",component:Details},
];
const router=createRouter({
history:createWebHistory(),
routes
})
export default router;
在超链接这块要使用这个路由，如下，在SinglePost.vue中的代码如下：
<script setup>
import {computed} from "vue";
const props = defineProps({
post1:Object,
})
const sippet = computed(()=>{
return props.post1.body.substring(0,10)+"...";
})
</script>
<template>
<div class="post">
<router-link to="posts">
<h3>{{post1.title}}</h3>
</router-link>
<p>{{sippet}}</p>
<span v-for="tag in post1.tags" :key="tag">#{{tag}}</span>
</div>
</template>
<style scoped>
.post{
margin:0 40px 30px;
padding-bottom:30px;
border-bottom:1px dashed #e7e7e7;
}
.post h3{
display: inline-block;
position: relative;
font-size:26px;
color:white;
margin-bottom:10px;
max-width: 400px;
}
.post h3::before{
content:"";
display: block;
width:100%;
height:100%;
background: #ff8800;
position: absolute;
z-index: -1;
padding-right: 40px;
left:-30px;
}
</style>
这样就可以访问这个路由了。点击标题就可以看到效果如下：当我们鼠标放到标题那块，页面的左下角就会显示要请求的路径
点击标题进入详情如下：
但是我们要显示指定的标题的内容，那我们就应该将id传递过去，SinglePost.vue这个组件改成如下：
<script setup>
import {computed} from "vue";
const props = defineProps({
post1:Object,
})
const sippet = computed(()=>{
return props.post1.body.substring(0,10)+"...";
})
</script>
<template>
<div class="post">
<router-link :to="{name:'Details',params:{id:post1.id}}">
<h3>{{post1.title}}</h3>
</router-link>
<p>{{sippet}}</p>
<span v-for="tag in post1.tags" :key="tag">#{{tag}}</span>
</div>
</template>
<style scoped>
.post{
margin:0 40px 30px;
padding-bottom:30px;
border-bottom:1px dashed #e7e7e7;
}
.post h3{
display: inline-block;
position: relative;
font-size:26px;
color:white;
margin-bottom:10px;
max-width: 400px;
}
.post h3::before{
content:"";
display: block;
width:100%;
height:100%;
background: #ff8800;
position: absolute;
z-index: -1;
padding-right: 40px;
left:-30px;
}
</style>
<router-link :to="{name:'Details',params:{id:post1.id}}">，将to改为:to的形式，这种形式可以绑定对象，可以将参数传递过去，加上params参数，这时候我们把鼠标放到标题上看到的路径还是原来的路径到/posts，这时我们应该修改路由，将参数加上去，这样路径就会改变了，index.js修改路由如下：
import {createRouter,createWebHistory} from "vue-router";
import Home from "../views/Home.vue";
import Details from "../views/Details.vue";
const routes=[
{path:"/",name:"Home",component:Home},
{path:"/posts/:id",name:"Details",component:Details},
];
const router=createRouter({
history:createWebHistory(),
routes
})
export default router;
{path:"/posts/:id",name:"Details",component:Details},这个加上了/:id，这样鼠标在放到
标题上，左下角路径就发生了变化，如下：
<script setup>
const props = defineProps({
id:Number
})
</script>
<template>
<div>details{{id}}</div>
</template>
<style scoped>
</style>
这样我们是不是可以拿到这个id了呢，答案是false，我们还需要在路由中设置props属性值为true，加上这个属性的意思就是我们可以对这个路由传递参数，并且可以在对应的接收页面获取到这个参数了。修改index.js如下：
import {createRouter,createWebHistory} from "vue-router";
import Home from "../views/Home.vue";
import Details from "../views/Details.vue";
const routes=[
{path:"/",name:"Home",component:Home},
{path:"/posts/:id",name:"Details",component:Details,props:true},
];
const router=createRouter({
history:createWebHistory(),
routes
})
export default router;
好了，这样我们就可以取到id了，如下：
我们得到了id的值，那么就可以根据这个id去获取这条数据了，那么我们同样需要创建一个getPost.js
import { ref } from "vue";
import axios from "axios";
const getPost = (id) => {
const post = ref({});
const load = async() => {
try {
let { data } = await axios("http://localhost:3000/posts/"+id);
post.value = data;
} catch (error) {
}
}
load();
return { post ,load}
}
export default getPost
这个里面需要传递参数，post为一个对象 ，请求的路径也需要加上id。
接下来我们需要Details.vue中获取这条数据，如下：
<script setup>
import getPost from '../composibles/getPost';
const {post,load}=getPost(props.id);
const props = defineProps({
id:Number
})
</script>
<template>
<div>details{{post.title}}</div>
</template>
<style scoped>
</style>
这样就可以获取到这个对象中的信息了，如下：
详情组件Details.vue可以再优化以下，如下：
<script setup>
import getPost from '../composibles/getPost';
const {post,load}=getPost(props.id);
const props = defineProps({
id:Number
})
</script>
<template>
<div class="post" v-if="post">
<h3>{{post.title}}</h3>
<p>{{post.body}}</p>
</div>
<div v-else>
加载中...
</div>
</template>
<style scoped>
</style>
效果如下：
