vue3-显示详情

这个在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，这样鼠标在放到

标题上，左下角路径就发生了变化，如下： 

那么我们在Details.vue中还需要取到这个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>

 效果如下：