路由传参详解速进

声明式导航传递参数方法共有三种，都自己的特点，下面详解三种传参方式

声明式导航和编程式导航都可以传参，声明式导航传参主要通过to来传递，此篇详解前者

一、params传递参数

        params传参分为字符串传递参数，和对象传递参数，需要写路径参数

     params字符串传递参数，传递前需要在js文件中提前配置好

         js文件中的配置

{

  path:'/a/:id', //:id此为路径参数，
  component:a

}

组件中通过to传参的方法（动态传参）

<router-link :to=" /a/123 ">跳转到子路由</router-link>

 params对象方式传递参数

        传递参数时写路径，不能使用path,必须使用name

<router-link :to="{
    name:'xiangqing',//必须使用name
    params:{
        name:'张三'
        id:001,
        title:他是个男的应该
    }
}">跳转到子路由</router-link>

获取params传递的参数的方式

this.$route.params.id

二、query传递参数

query传参也分为了，对象传参和字符串传参

query字符串传递参数方式

<router-link :to="/a?id=1">跳转到子路由</router-link>

 query对象传递参数

<router-link :to="{
            path:'/a',
            query:{
                id:123
            }

    }">跳转到子路由</router-link>

获取query传递的参数方式

this.$route.query.id

三、props传递参数

它主要写在js文件中，且同时分为三种，值为对象形式，值为布尔值，值为函数

3.1当props值为对象形式时，传给目标组件的为静态数据

 props:{name:'jack',age:'123'}

3.2当props值为布尔值时，将params数据变成props数据    传给目标组件

props:true

3.3当props值为函数时,props方法接受一个参数为$route  通过return  将对象传递给须要参数的组件

props({query}){
    
    return{
        
        id:query.id,
        name:query.name
        }

    }

总结

此篇到此结束，简单介绍了路由的三种传参，欢迎补充