008-尚硅谷-尚品汇-路由传递参数

哈喽，各位小伙伴们大家好，那接下来啊，咱们呢，去讲一下子陆游传餐。当然啊，咱们呢，在讲陆游传餐之前啊，先把这几个问题先解决了，8.1。问的第一个问题是什么呢？就是路由的跳转有几种方式。就比如说你从A路由跳转到哪儿啊，跳转到B路由，就比如说从home跳转到色。那么路由的跳转方式呢？当然是有两种方式，第一种呢是声明式导航。就是谁呢？R-link。当然要注意一件事儿，声明式导航务必要有突出性。它呢，可以实现路由的跳转，对吧，实现路由的跳转。

当然呢，还有另外一种叫做编程式导航。编程式导航呢，其实利用的是谁呀？利用的是组建实例的Dollar。Router。第二，Push或者是replace方法。那么可以实现路由的跳转。当然啊，老师呢，在前面也说过，就是声明式导航，他能做的编程式导航都可以。而且编程式导航呢，它更好一些，因为在路由跳转之前，你可以咋的可以书写一些自己的业务，那业务完成之后再进行路由的跳转。对吧，就是他。第二个问题，8.2。那么路由传参它的参数有几种写法呢？那我相信很多同学应该也知道有两种，第一种呢是para参数。

它呢，属于路径当中的一部分。但是需要注意，哎，需要注意。那么在配置路由的时候需要咋的需要占位？那第二个呢，就是query参数。宽参数呢，是不属于啊路径当中的一部分，哎，当。中的一部分。类似于谁呢？类似于阿贾克斯当中那个query string，对吧，阿贾克斯。中的。Query Qu yay query string，对吧？就类似于这种情况，比如说杠，哎，Home，问号K等于v and k等于V的形式。对吧，那当然配置路由的时候啊，不需要站位，不需要站位。那咱们呢，接下来呢，主要呢，就是讲一下子陆游船餐。

咱呢，找一个地儿专门去聊聊他。就比如说这是首页后，当老师在这输入一个关键字，比如说华为，那么一点击搜索按钮的时候，咱们呢，会从home模块跳转到色模块。那也就进行了路由的跳转，那么老师呢，想把收集到这个关键字啊，在路由跳转过去之后，给谁呀，给咱们的这个搜索页面给他带过去。那所以说啊，咱们呢，去搞搞，当然得找到咱们的hier组件，那咱们找一下hier。就比如说啊，咱们呢，要要收集一下这个表单元素的数据，那咱们呢，找一下子这个input。对吧，往底下找一下在这儿。

对吧，这不旁边是搜索按钮嘛，举个例子，你看，比如说老师呢，在这呢，收集一下的表单数据，当然表单数据得通过V岗model。去收集或者是res。那这里面啊，咱们呢，采用数据双向绑定去获取。比如说啊，咱们来一个就叫做keyword关键字岂止为空。那当然，这里你看这种写法它是不对的，对吧？你得re回来一个对象对吧？Re to re一个对象叫做k word，为什么呢，为空。那当然，咱们呢，要收集这个文本框的数据，那就来一个呗，V搞model，为什么呢？为keyword。那咱们呢，先测试一下子，看一下子咱们的这个数据能不能收集到。找到咱们的hier组件看一下，123123 OK，没问题。那举个例子，比如说当老师点击这个按钮的时候，就点击它的时候。

我想怎么的，我想把收集到这个关键字啊，在路由跳转的时候给设置传过去。对不？比如说咱们先聊第一个叫做帕斯参数。对吧，以及宽参数咱们都去聊聊。那这里呢，老师呢，也去做一下笔记看这。那这里呢，咱们讲一下的路由传参，哎，路由传递参数。那么路由传递参数有几种写法呢？那咱们先说第一种。第一种呢，就是最简单的形式，就是字符串形式。这种呢是比较简单的。那咱们看一下，就比如说啊老师在这输入关键字叫做啊叫做ABC。当老师一点击这个按钮的时候，OK，我把这个ABC啊给谁传过去，给设置传过去对吧，通过para参数传。以及呢，华瑞参数呢，也传一个，就是传它的一个大写。

对不，也就是说路由跳转的时候，从home跳到色置，咱传递两种参数，帕参数也传，Query它也传。对不，那当然，那咱们要传的时候，你需要在这咋的，是不是配置一下路由，找到咱们的router。那也就是说你的search要接受路由跳转传过来的参数，那当然它有帕参数，那咱们这里面呢，需要去进行占位，那就是冒号，比如说叫keyword。对吧，那咱们呢，先看一下的第一种写法，就是纯纯的字符串形式。比如说当你一点击这个搜索按钮的时候，OK，往设置跳。那以及咱们呢，要给他带一个帕参数，那不就反斜杠。加上谁是不是加上咱们的这点keyword。那咱们呢，可以测试一下，你看啊，比如说老师来一个ABC，当老师点击搜索按钮的时候，进行了路由跳转，跳转到色，而ABC也给咱们的色置路由组件也咋的了，是不是也传递过去了。

对吧，它是参数。那以及啊，老师呢，还想给他传一个什么，传一个宽参数，你想想后面应该是什么样子，是不是应该是问号K等于V的形式。那所以说咱们来一个呗，那你比如说叫问号。那这个咱们叫什么呢？比如说咱们就叫做K。等于什么呢？比如说是当前的这个关键字，因为它是个字符串，我给它变成大写就是toup。那所以说这次路由跳转的时候，咱们看一下，比如说从后。跳转到色齿的时候，那咱进行了路由跳转以及传参。而且传了两个参数，一个是帕斯参数，一个是query参数。

对不，那当然对于色路由组件，它是能拿到相应的参数的。比如说qua参数，比如说帕参数，那当然都可以拿到，那咱们呢，可以在测试当中啊，咱呢给它显示一下。对吧，比如这老师给他来一个，那这个是什么参数呢？是para参数。那咱们呢，去展示一下，他们应该是Dollar root。第2PARA，第2KEYWORD。那除此之外呢，还有一个是query参数，那咱也来一个，这个叫做query参数。它应该是什么呢？应该是Dollar，哎，Dollar root.quary.k。那所以说咱们呢，可以看一下它是能拿到的，当然为了好看一些啊，老师呢，给这加一个杠杠杠，哎，这也给他来一个杠杠杠。对不，那所以说啊，你看嘛，老师呢，再给你尝试一下，就比如说咱来一个，比如说一啊1A2Q。

对吧，1A2Q走路由跳转以及穿插。对吧，所以说呢，这是咱们的query参数和para参数，这是第一种写法，什么形式呢？就是纯纯的字符串形式。对吧，那当然呢，还有第二个。第二种，第二种呢，可能呢，相对而言写起来呢更方便一些，就是什么呢？模板字符串。那咱们呢，老师呢，把这块呢，给你注上，咱们看一下。就比如说点Dollar router，点咱还是用push。比如说啊，咱传入的是模板字符串，比如说你往哪跳，是往设置跳。对不？那你的para参数是谁？是不是就是咱们的this I this.keyword。

以及你后面还有谁，是不是后面还有宽参数，那就问号呗，K等于什么？等于咱们的这个this。点keyword.toup对不，它也是可以的。那咱们呢，也测试一下子，比如说1A2Q找你路由跳转以及穿参，这是没问题的。所以说呢，模板字符串呢，相对比而言呢，相对比上面而言更简单一些，当然这两种形式咱们在项目当中都不用。因为常用的是第几种的，是第三种就是对象的写法，第三种写法就是什么呢？对象的写法。哎，对象的写法。那咱们呢，可以写一下，比如说this Dollar router.push当然它传的是一个对象。

而且这块要注意一下子，如果说你传的是对象，而且是路由跳转传参，还传了帕参数。那你这里需要注意，需要给咱们的路由去命一个名。那找到咱们的这个设置，你需要给它起个名字。比如说呢，咱们呢叫做name，那叫啥呢，叫做search。CH。那所以说回到这儿，那你就可以写了，往哪叫name name叫啥呀？叫search，以及带什么参数，比如说para，当然它右侧是对象，那这里面呢，咱们叫做keyword，等于什么？等于this.keyword。以及呢，还有一个是query参数，Query呢，比如说咱们叫做K值，为什么呢？this.keyword.to啊up CA。所以说对象的这种写法才是咱们常用的。

比如说咱们看一下子q we，当你一点击进行路由跳转，OK参是不是能传过来，有咱们的para参数以及query参数。这里要注意一件事，如果说你在路由跳转传参的时候带有什么呀，Para参数，而且要写对象的写法，那这块要注意不能写P那种形式，得用name的这种写法。所以说啊，你需要在这儿给陆游起一个名字，这里要切记。对吧，那所以说这是咱们的三种进行路由跳转的方式，以及携带query参数和参数的写法。