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>

 效果如下:

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue Video Player是一个基于Vue.js的视频播放器插件,它支持HTML5视频、Flash视频和YouTube视频播放。下面是Vue Video Player的完整教程。 1. 安装 使用npm安装: ``` npm install vue-video-player --save ``` 2. 加载 在Vue中加载Vue Video Player: ```js import VueVideoPlayer from 'vue-video-player' import 'video.js/dist/video-js.css' Vue.use(VueVideoPlayer) ``` 3. 使用 在Vue组件中使用Vue Video Player: ```html <template> <div> <video-player ref="player" :options="playerOptions"></video-player> </div> </template> <script> export default { data() { return { playerOptions: { autoplay: false, controls: true, sources: [{ type: 'video/mp4', src: 'https://example.com/video.mp4' }] } } }, mounted() { this.$refs.player.play() } } </script> ``` 4. 配置 Vue Video Player支持许多选项,您可以在playerOptions中设置它们: ```js playerOptions: { autoplay: false, controls: true, sources: [{ type: 'video/mp4', src: 'https://example.com/video.mp4' }], techOrder: ['html5', 'flash'], poster: 'https://example.com/poster.jpg', language: 'en', playbackRates: [0.5, 1, 1.5, 2], fluid: true, aspectRatio: '16:9', muted: false, loop: false, preload: 'auto', notSupportedMessage: '此视频格式不受支持', controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true, volumePanel: { inline: false } } } ``` 5. 事件 Vue Video Player还提供了一些事件,您可以在Vue组件中监听它们: ```html <template> <div> <video-player ref="player" :options="playerOptions" @play="onPlay"></video-player> </div> </template> <script> export default { data() { return { playerOptions: { autoplay: false, controls: true, sources: [{ type: 'video/mp4', src: 'https://example.com/video.mp4' }] } } }, mounted() { this.$refs.player.play() }, methods: { onPlay() { console.log('播放器已开始播放') } } } </script> ``` 常用事件包括: - play:播放器开始播放 - pause:播放器暂停 - ended:播放器播放完成 - error:播放器出错 - timeupdate:播放器时间更新 6. 自定义皮肤 Vue Video Player使用video.js作为底层技术,您可以使用video.js的皮肤或自定义皮肤。 使用video.js的皮肤: ```js import 'video.js/dist/video-js.css' import 'video.js/dist/skin-flat.css' ``` 自定义皮肤: ```scss .video-js { /* 控制栏 */ .vjs-control-bar { /* 背景颜色 */ background-color: #333; /* 文字颜色 */ color: #fff; /* 进度条 */ .vjs-progress-control { .vjs-progress-holder { .vjs-play-progress, .vjs-load-progress { /* 进度条颜色 */ background-color: #fff; } } } /* 播放暂停按钮 */ .vjs-play-control, .vjs-pause-control { &:before { /* 图标颜色 */ color: #fff; } } /* 时间显示 */ .vjs-time-control { /* 时间颜色 */ color: #fff; } /* 全屏按钮 */ .vjs-fullscreen-control { &:before { /* 图标颜色 */ color: #fff; } } /* 音量控制 */ .vjs-volume-panel { /* 静音按钮 */ .vjs-mute-control { &:before { /* 图标颜色 */ color: #fff; } } } } /* 播放器 */ .vjs-big-play-button { /* 播放按钮 */ &:before { /* 图标颜色 */ color: #fff; } } /* 加载条 */ .vjs-loading-spinner:before { border-color: transparent transparent transparent #fff; } } ``` 7. 更多 完整的Vue Video Player文档可在GitHub上找到:https://github.com/surmon-china/vue-video-player Vue Video Player支持的选项和事件与video.js相同,详情请参阅video.js文档:https://docs.videojs.com/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱人间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值