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

原创已于 2022-07-28 19:22:02 修改 · 545 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-07-28 18:43:00 首次发布

vue实战专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在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
},