vue路由传参（六种方式）-Toy模板网

这篇具有很好参考价值的文章主要介绍了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'],在组件模板中接收

文章来源地址https://www.toymoban.com/news/detail-643621.html

到了这里，关于vue路由传参（六种方式）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！