vue-router--路由传参--param传参

春风霓裳

已于 2022-06-19 17:22:24 修改

阅读量3.1k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-06-19 17:20:38 首次发布

本文链接：https://blog.csdn.net/qq_43470725/article/details/125359909

版权

vue 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

和query的不同：https://blog.csdn.net/qq_43470725/article/details/125357249

对象形式：qarams的路径配置只能用name配置

1、路由配置声明占位：

 children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:title',
                            component:Detail,

                        }
                    ]

2、数据组件传递数据：

 <!-- 跳转路由并携带params参数，to的字符串写法 -->
            <!-- <router-link :to="`/about/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> &nbsp;&nbsp; -->
            <!-- 跳转路由并携带param参数，to的对象写法 -->
            <router-link :to="{
                //path:'/about/message/detail',
                name:'xiangqing',
                params:{
                    id:m.id,
                    title:m.title
                }
            }">
            {{m.title}}
            </router-link>

3、接收组件接收数据：

<li>{{$route.params.id}}</li>
        <li>{{$route.params.title}}</li>

代码演示：
在路由配置文件index.js中声明参数：

// 该文件用于专门创建路由器
import VueRouter from 'vue-router'
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            children:[
                {
                    // 二级路由路径不能加/
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:title',
                            component:Detail,

                        }
                    ]
                }
            ]
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    // 二级路由路径不能加/
                    path:'news',
                    component:News
                }
            ]
        }
    ]
})

在message组件中传递参数：

<template>
    <div class="Message">
        <ul>
        <li v-for="m in messageList" :key="m.id">
            <!-- 跳转路由并携带query参数，to的字符串写法 -->
            <!-- <router-link :to="`/about/message/detail?id=${m.id}&title=${m.title}！`">{{m.title}}</router-link> &nbsp;&nbsp; -->
            <!-- 跳转路由并携带query参数，to的对象写法 -->
            <!-- <router-link :to="{
                //path:'/about/message/detail',
                name:'xiangqing',
                query:{
                    id:m.id,
                    title:m.title
                }
            }">
            {{m.title}}
            </router-link> -->
            
              <!-- 跳转路由并携带params参数，to的字符串写法 -->
            <!-- <router-link :to="`/about/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> &nbsp;&nbsp; -->
            <!-- 跳转路由并携带param参数，to的对象写法 -->
            <router-link :to="{
                //path:'/about/message/detail',
                name:'xiangqing',
                params:{
                    id:m.id,
                    title:m.title
                }
            }">
            {{m.title}}
            </router-link>
        </li>
        </ul>
        <hr>
        <router-view></router-view>
        
    </div>    
</template>

<script>
export default {
    name:'Message',
    data(){
        return{
            messageList:[
                {id:'001',title:'消息001'},
                {id:'002',title:'消息002'},
                {id:'003',title:'消息003'}
            ]
        }
    },
    methods:{
    }
    
}
</script>

<style scoped>
    .Message{
        background-color: bisque;
    }
</style>

Detail组件接收参数：

<template>
    <div class="Detail">
        <ul>
        <!-- <li>{{$route.query.id}}</li>
        <li>{{$route.query.title}}</li> -->
        <li>{{$route.params.id}}</li>
        <li>{{$route.params.title}}</li>
        </ul>
    </div>    
</template>

<script>
export default {
    name:'Detail',
    mounted(){
        console.log(this.$route)
    },
    data(){
        return{
        }
    },
    methods:{
    }
    
}
</script>

<style scoped>
    .Detail{
        background-color: coral;
    }
</style>