vue路由传参（六种方式）

科技前沿 • 2025-03-15 17:12 • 阅读 38

大家好，我是讯享网，很高兴认识大家。

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}传递

实例：{

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'],在组件模板中接收

vue路由传参（六种方式）

相关推荐