动态路由 命名式路由 点击列表项跳转到对应详情页

本文介绍了在Vue.js中如何设置动态路由和命名式路由,通过列表页的nowPlack点击,实现跳转到对应详情页(detal)的功能。示例代码展示了如何配置路由,包括嵌套路由和使用`:id`参数来传递详情页的唯一标识。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

列表页 nowPlack

<template>
    <div>
        nowPlack列表页  films的子页面,
        <ul>
            <li v-for="(item,id) in List" :key="id" @click="handClickPage(id)">
                <img :src="item.url" alt="">
                {{item.name}}
                {{item.id}}
                <!-- 列表跳详情,声明式写法,需要传参给to前面加上冒号  但是长列表一般不适用-->
                <!-- <router-link to="/detal">{{item.usename}}</router-link> -->
            </li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
           List:[] 
        }
    },
    mounted(){
        //https://m.maizuo.com
        axios.get('http://rap2api.taobao.org/app/mock/279550/http/get')
           .then(res=>{
            // console.log('rap2数据',res.data.data[0].list)
            this.List = res.data.data[0].list
            console.log('list数据',this.List)
        })
    },
    methods:{
        handClickPage(id){
            console.log(id)
            //编程式导航 1
            // location.href = '#/detal'
            //编程式导航 2    可以避免忘写 #
            this.$router.push(`/detal/${id}`)//router拿到的是(配置的)整个路由对象
        }
    }
}
</script>

命名式路由js代码

<script>
import axios from 'axios'
export default {
    data(){
        return{
           List:[] 
        }
    },
    mounted(){
        //https://m.maizuo.com
        axios.get('http://rap2api.taobao.org/app/mock/279550/http/get')
           .then(res=>{
            // console.log('rap2数据',res.data.data[0].list)
            this.List = res.data.data[0].list
            console.log('list数据',this.List)
        })
    },
    methods:{
        handClickPage(id){
            //通过命名路由跳转
            this.$router.push({
                name:'detal',
                params:{
                    id
                }
            })
        }
    }
}
</script>

详情页 detal

<template>
    <div>
        detal详情页 点击nowPlack的列表项跳转详情
    </div>
</template>
<script>
export default {
    data(){
        return{
           
        }
    },
    created(){
        //console.log('created',location.href)//拿到的是路径
        //route拿到的是当前匹配的路由
        console.log('created',this.$route.params.id)
        //axios利用id发请求到详情接口,获取详情数据,布局页面
    }
}
</script>

路由写法

 {
        path:'/films',
        component:Films,
        children:[
            //嵌套的页面(列表页)
            {
                path:'/films/nowPlack',
                component:NowPlack
            },
            {
                path:'/films/comeSinge',
                component:comeSinge
            },
            {
                path:'/films',
                redirect:'/films/nowPlack'
            }
        ]
    },
    { 
        //动态路由 :是固定  id是可以自定义的
        //这里匹配到了二级路由,也可以匹配三级四级,在:id后面依次在加上三级四级详情页的跳转i路径,我这里主要是根据id识别判定的每一项的详情页
        path:'/detal/:id',
        component:Detal
    },

命名式路由写法

{
path:‘/films’,
component:Films,
children:[
//嵌套的页面(列表页)
{
path:‘/films/nowPlack’,
component:NowPlack
},
{
path:‘/films/comeSinge’,
component:comeSinge
},
{
path:‘/films’,
redirect:‘/films/nowPlack’
}
]
},
//命名路由
{
name:‘detal’,
path:‘/detal/:id’,
component:Detal
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值