vue练手项目（day3：路由组件间传参）

1.路由组件间传参的三种方式

        query参数：传递query参数只需要在路由地址后面通过'？'声明即可，即问好后面所跟的key-value键值对就会被目标路由组件的query属性所接受到，那么就可以通过路由组件的query属性进行访问了

            // 2.query参数，query参数是直接写在路径中的，用？作为标识符
             this.$router.push(`/search?keyword=${this.key}`)

        params参数：传递params参数，如果采用的不是对象传参，则第一步需要在路由配置里面指定占位符。否则会出现路径解析错误问题，因为params参数是通过 ' / '紧跟在路由地址后面的，如果你传入了params参数却没有在路由配置对象中进行配置，则会导致无法找到该路由，即假设目标路地址为 ‘/search ’ 如果此时传入了params参数那么路径会自动变成/search/params ’ 那么此时这个路径是不归路由器管理的，就会导致目标组件无法出现.

        配置params参数占位符：

        {
            name:'search',
            path:'/search/:key?',
            component:Search,
            meta:{
                isShow:true,
            }
        },
//如果你配置了params占位符，但是你有不传入参数，那么你的路径就会出现问题，如果说params参数是可传可
//不传的，那么就在后面加个问号

        传递params参数：

this.$router.push('/search/'+this.key||undefined)
//如果传进去的param参数是个空字符串也会出现路径的显示错误,那么可以通过逻辑短路运算符解决，就是如果
//是无效字符串就返回一个undefined

        通过对象的方式传递query和params参数：这个时候就要关注上面提到的params参数不传或者传空值的情况了（如果有配置占位符的话），另外对象写法的话，可以用路由的名称来指定路由，也可以通过path属性指定路由，但是如果是通过path指定的话，是不可以和params参数连用的

this.$router.push({name:'search',query:{keword:this.key},params:{key:this.key||undefined}})

        传递props参数，路由组件是可以使用props的，但是不常用

        在路由配置对象中有三种方式实现props：

        布尔写法：props：true,这样就把params中的参数通过props传递给了其他组件

        对象写法：props：{a:'10',b:'20'}，也可以实现传递

        上面两种不怎么常用，相对常用的是函数写法，props：function（）{return {} }

        使用props的唯一好处就是属性会直接出现在实例对象身上，用的时候比较方便

2.路由传参的几个面试题

        1.路由传递参数（对象写法）path和params是否可以一起使用？

                答：不行的。你会发现无法进行路由跳转；URL就出了问题如图:

                                           

        2.如何指定params参数可传可不传？

                答：在路由配置对象里配置params参数占位符的时候在占位符后面加上一个问号即可

        3.params参数可传可不传，那么如果传入的是空串会怎么样？如何解决？

                答：如果传入空串。那么URL会出问题，虽然路由可以跳转。解决方法就是如果params值是一个空串，那么就把这个空串变成undefined，用短路或即可

        4.路由组件能否传递props参数？        

                答：可以，而且有三种配置方法；

                        1）props值为一个布尔值；这时候params参数会被目标路由组件的props接收到，

                        2）props值为一个对象；对象里的键值对会被目标路由组件的props接收到，

                        3）props值为一个函数；函数返回的对象的键值对会被目标路由组件的props接收到