vue路由传参(六种方式)

1.query传参:

        query传参,通过get传参也就是原始传参,在path路径后面跟上?id=18&name=“张三”,会传递到query里面

        实例: {
                path:'/home'?name='张三'&age=18,
                component:()=>import('./home.vue')
           }

        通过$route.query获取对象,点属性名,获取参数

2.动态路由传参(params传参):

        在path后面可以跟上多个/:id等等,在路径上面写的参数会传递到动态路由的参数后面

        实例:{
                        path:'./home/:id/:age',
                        component:()=>import('./home')
                    }

        在模板中使用$route.params会获取参数对象,.属性名获取传递的参数

3.meta传参:

        在路由配置文件上通过meta:{name:'张三',id:17}传递

        实例:{

                         path:'./home',
                         component:()=>import('./home')

                         meta:{name:'张三',id:16}

                }

                 在模板中使用$route.meta会获取参数对象,.属性名获取传递的参数

4.props传参(分为三种模式:布尔模式,对象模式,函数模式):

(1)布尔模式:

        布尔模式传参,在路由配置文件中的路径配置中,如果你使用了动态路由,那么他不仅仅可以往params里面传递参数对象过去,他也会往props里面传递过去,注意参数接取需要在你所要跳转的路径的组件中接取,如果使用动态路由传递参数想要使用props,需要设置props为true

        实例:  {
                path:'/home/:id/:name',
                component:()=>import('./Home'),
                props:true  //布尔模式
           },

        props:['id','name'],在组件模板中接收

(2)对象模式:

        在配置路径的对象中声明一个props对象,其内部的参数,可以在对应的模板中接收

        实例:{
                path:'/list',
                component:()=>import('./List'),
                props:{
                    name:'老王',
                    age:20,
                    sex:"男"
                }  //对象模式
            },

        props:[,'name','age','sex'],在组件模板中接收

(3)函数模式:

        声明一个props属性,只为函数,可以把想要传递的参数通过return对象返回出来,在对应的模板中接收

        实例:  {
                        path:'/goods',
                        component:Goods,
                        props:()=>{
                            //函数模式
                            return {
                                name:'老王',
                                age:20,
                                sex:"男"
                            }  
                        }
                    },

 props:[,'name','age','sex'],在组件模板中接收

        

猜你喜欢

转载自blog.csdn.net/VXYupq/article/details/129947757
今日推荐