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