00:00
大家好,我是学习园地的特约讲师高若峰,上节课我们学习了嵌套路由,也称为子路由,那小法呢,跟大家都说过了,也做过详细的演示,那这节课呢,我们再来学习一个,呃知识点,也是我们学习路路由必须掌握的知识点,也就是传递参数的方式,那这个传递参数方式呢,可以在子路由上传递,也可以在我们的呃,单独的路由上传递,你比如说什么叫做参数,参数呢,有两种形式,比如说还是看我们这个。这个你看,比如说我们点关于我们的时候,我们用的是这样,你看那个路由。这个参数啊,页面17点击查询12,你看数字变了对吧,变了变了变了,那这种呢,通过参数的变化加载不同的模板,这样的一个方式就称为什么这个就称为参数,那参数呢,有这一种也有什么呢?比如说这是搜索,比如搜索PP,你看有问号搜索关键字对吧,当然我这里边搜索PP搜索呃。假如说名字等于张三对吧,可以有多个是这样,可以有多个是这样的,当然这个是呃,没搜索到的,所以呢,我们用参数这种方式,用这种方式呢,一般的呢,我们只能传一个值,但是这种的是pass if的格式,看上去这种格式比较好,相当于下边的子路由一样,对吧,只是这个参数变化。
01:21
你看,所以呢,这种值的变化,比如说改成12。这种变化呢,就称为动态路由,就相当于路由的一部分,对吧,只是这个值变化做相当于动态路由,那动态路由。有一个什么好处,当然了,你用参数动态路由都可以,但是这种呢,我们不适合写多个值对吧?那在这里边写多个值的话,配置不太好配置,比如说你这里边再写一个配置等于12 AR文章等于13对吧,然后名字等于张三对吧?其实我们这样的格式也是支持的,但是呢,在咱们这里边儿,呃,就是前端这里边不好配置,前端这里边配置的时候呢,通常都是使用一个值,如果有多个值,这一个值呢,就把这个路由产生变化,称为动态路由,那什么时候用参数呢?
02:02
用查询的方式,比QY这样的一个拼接字符串,这种查询的方式,这样可以写多个名字,等于张三对吧,然后安德福年龄等于李四的年龄,等于嗯20对吧,等等你加多少个参数都可以对吧。但是尽量别太多,太多的时候我们也用不过来,所以呢,十个一里都已经很多了,对吧?所以我们如果需要动态路由,就一个参数的话,我们用动态路由,这样比较方便,如果有多个参数的话,我们用另外一种方式,所以呢。传递参数有两种方式,一个是参数的方式,一个查询字符串的方式,参数的方式就是在就是这种格式,那查询字符串的方式呢,就是这种格式,那我们分别看一下,那这两种不管是哪种格式,都是我们经常用到的,因为我们用到路由,也就是地址栏一旦有改变,那我们肯定是用户发生了请求,对吧,只是请求什么数据。对吧,然后我们还得再呃另外一个跳转过来,我们还得接收到这个参数,根据参数我们到数据库去获取一些内容,或者获取一些文章就可以了。
03:05
那再比如说我们前边。做过的这个子路由的这个程序,把这个点开啊,你看子路由我们在这块,那我们没有用,我们只用了子路由对不对,你看点个人中心,然后点我的订单,你看这里边订单个人设置。那就会变成一个什么情况呢?咱们用子路由可以完成这样的一个效果,订单个人设置对吧,然后这里边跟着我们的数据进行变化,这都没没问题,但是有一个问题,什么问题呢。那。我们在做的时候有一个什么问题,最主要的这个里边都是单独的组件,如果你有十个菜单,那我这就编写十个组件。而我们像这样的情况,如果结构是一样的,我们肯定用的是一个组件,你看结构是一样的。所以我们通过参数用一个组件把数据传过去,根据数据到数据库里边获取这篇文章,然后呢,摆放这篇文章就可以了,模板中的一套只是数据变化。
04:03
不然的话,你有1000篇文章,你得写1000个组件吗?对吧,所以用子路由咱们能达到这种,刚才咱们看到这种切换,但是呢,这里边用的不是一个模板,那现在咱们就把它改成一个模板,对吧?用参数来切换,那我可以从传参数,可以在子路由的上面去算参数,也可以在上面的路由上去算参数,都是一样的道理。那我们现在就写一个,比如说。呃,我们先传递呃参数,那我们在先写传递参数,我在配置路由,一步一步来啊先在界面上写,那咱们找到呃,这个地方也就是这个地方,咱们在菜单菜单,嗯。找到我们的。嗯,这个是显示的地方,我们不要把它关掉,这个呢我们也不要。这些我们都不要啊。APP我们现在暂时也用不上,你看在这个菜单里边,用户里边,我们下边再加几个。再加几个,当然了,我可以直接在这加,对吧,直接在这加,我们复制一份。
05:04
复制一份,那这回呢,我就让他到,呃,用户,比如说用户下边有单页配置吧,我就随便写了一层子路由对吧,所以呢,我肯定得在这块配置这个子路由,然后我传递,比如说一。那就会把。这个一作为参数传递到这个子路由的下边,是这样的传递,当然了路由里边我得配置这样的一个方式,那如果我这里边有多个,有多个这块,比如说写上啊3121加上这个,那如果有多个的话,比如说我也想循环便利便利一下。那我们存参数,如果这里边涉及到用变量的话,如果不用变量,我们直接这么写,如果涉及到变量的话,我们在这里边我们做一个比如说是从服务器里接口里边获取到的文章的列表,那当然我就不请求网络服务了,我直接在这里边date去模拟写一下,然后return,返回一个,比如说文章列表AR,嗯,这里边arle文章。嗯,是一个数组,然后呢,数组里边呢,是单个的某一个文章,比如说文章的标题。
06:08
啊,这是文章。然后文章一对吧,这是标题,文章有标题,是不是还有ID有内容啊等等,那我就写两个就行,比如说有个ID。呃,有个ID,比如说这块是十随便写一个,然后我们。比如说四篇文章,11 12,十三十四五篇文章吧,那我们现在如果我想用这个去做的话,你比如说ul。下边的Li Li里边放上的是什么?是root。这个。然后在这里边,我们需要在这块去遍历,你看使用呃V-for去遍历,遍历谁呢?Alle这块有没有S。多文章那加个加个S,然后便利他。
07:01
Item,那我们如果想在这里边显示内容的话,在这里边显示内容,也就是显示我们的标题对不对,那item里边是不是有一个什么title口是标题,然后呢,这个标题一点击标题的时候,那么让我们侧面去显示它的数据,所以呢,我们在这里边一定得加一个路由。跳转的一个pass路径对不对?那跳转到哪呢?User下边呢,因为咱们是在子路由,不是在上面一层路由显示订单配置下边的,呃,在这里边我们传上这个ID,那如果我们这里边想加变量,我前边to这块是不是一定得用什么绑定微B的方式给我们绑定上对不对?然后我们前边它这块会给我们当成变量嘛,那我们现在加上这个,它就是一个字符串,再加上我们的变量ITM里边是不是有个ID啊,这样的话,我们是不是每个路由都给我们绑定上了。这样的话微断货二就可以了,呃。单引号,单引号没问题,这怎么分,其实我说错误错。
08:01
来,我们看一下个人中心。刷新一下。刷新一下,你看这是文章一,这是文章一,这是文章一二,你看当我鼠标放了的时候,你看这个路径,看下边这个位置,看下边这个位置啊,你看。这是单一的,咱们团队配置下边是一对不对,二三四十二十三十四十五对不对,一直到14,它下边地址变化,但现在我们还不能点击,现在一点击的话,因为我们路由都没配置对不对。路由没配置是点击不过去的,那如果我想点击这个路由的话,让这边显示单独的一个文章,只要文章内容模板固定内容不动,对吧,从数据库获取,那我们在这里边就可以,需要怎么着。在我们的路由里面配置,那我这边是不是在用户下面得再配置一个子路由啊才可以啊子路由。当然了,如果你不用子路由,那你就直接在上面配置就行了,那我们这块需要一个什么,需要一个。路径是配置的对吧。那需要一个路径是配置的,那我怎么在后边能显示动态路由是一个变量呢?
09:01
公开路由需要是一个变量的,那你加上一个冒号,然后你随便起个名字,那咱们这个是文章的ID,你叫PID也好,或者是就叫I也好,对吧,你叫什么名字都行,自己起的一个名字加个冒号分开,那比如说我叫做ID。叫ABC什么都行啊。叫什么都可以叫ID,那我叫ID之后,那我现在在这里练。你看那我需要有一个这样的一个组件在这块,因为这些咱们说了上面是分开的组件,这些从单页一到这是文章一,这些我们单独用一个组件,那我这块比如说用一个MY配置的一个组件,PE的组件,但这组件没有呢,没有对吧,所以呢,我们需要在这里边。嗯。他也算是页面级的吧,所以在这里边去做新建一个组件。MY配置这里边这里边我现在随便写一行,一只是让它有一个这样的一个变化,但是错误不用管,因为咱这里边还没有引入的对吧,那组件加完了,也就是访问这个动态路由的时候,它会下边是这样。那如果在这块它下边有动态路由,比如说一或者是二三,那这块呢,直接这样排底看到了吧,所以呢,咱们在子路由里边,就是直接在子路里写,那这块我们现在导入一个什么呢?叫MY配置。
10:10
Pag,然后这块写上。卖。媳妇买配置这个。这样的话,我们就把这个导入进来了,而且呢,我们现在一点击任何一个。刷新一下。个人中心。然后点击配置。现在点击还是跳转,因为我们拼接的格式是什么格式呢?你看好了啊,拼接的格式诶是这样,你看user下边也好,或者user下边的配置也好,对吧,将配置下边有十,所以这边有一个斜线,那你直接加的话,加十的话,那相当于配置这样的是十。对吧,所以呢,咱们不是这样做,需要在哪呢?需要在我们这个下边加一个什么,加一个斜线配置的时候别忘了。因为配置下边的是这样,那又因为它是子路由,所以它会是这样的一个路径,什么user下边的,配置下边的,那么ID传什什么,前面一定要加个冒号,那意味着这个是起的一个名字,相当于是一个变量的意思,那这边是一也行,是二也行,是三也行,是四也行,对吧?当然都是字由串,你是整数啊,ABC啊什么都可以,对不对,那咱们现在要ID肯定要是要的是一个数字,这边要加一个冒号,加一个冒号,那我这地方现在在跳转的时候没问题了,你看啊,加上。
11:25
单页一,你看一过来了,这边单页啊,我们现在点的每一个。现在点一个每一次都有用的,是同一个模板,你看地址的变化,14上面变成13对吧,十二十一十我点单页变成一。那就形成了这样的一个情况。对吧,所以呢,这里边有几个知识点大家要知道几个地方要记住啊,在我们配置路由的时候,别忘了动态路由相当于又多了一层子路由,作为参数又多了一层,所以加上斜杠,加上冒号这个不然跳转是跳转不过去的,因为格式是这种格式,这块是一个变量,自己随便起的叫什么名字都行,明白吧,然后我们在使用的时候,在使用的时候。
12:05
那我们就需要这么去使用,再加一层,后边是一个变量,相当于一个数据,那如果你是便利数据的,别忘了绑定这个,然后后边才能变成参数,这咱前面说过多次了,对不对,不然的话,这里面怎么能使用变量对吧,拼接这样方式,那现在我拿过来了,拿过来之后我是不是。现在点击没问题对吧,也就路由这个格式,咱们是可以跳转了,地址栏路由给变化了,这里边也可以点击了,那模板变化是不是得接收啊,不然你传过来参数没用了,所以一旦上边写上这样的参数,那我就得接收接收怎么接收。看一下。嗯。接收我们找到这个Y配置,因为在这里边用对吧,一行一怎么接收呢。也就是说,这是文章的模板。这是文章的模板,我在这块加上H2吧标题。
13:01
然后文章内容咱就不说了,因为这里边我如果能获取这个ID,我这里边能不能用阿这种阿贾克斯异步请求的方式,到数据库里边把这篇文章拿过来,对吧,肯定是可以的,做一个搜索吗?你看现在如果我这里边,比如说我就想获取到这个ID,那我用插值的方式在这里边获取一下。你看或者是我放到这里边文章内容里,比如比如说ID就就随便写一个吧,文章ID,那你能获取文章文章ID,你就能够到服务器里边获取它的所有的数据,ID是多少,那在这里边我们是不是有一个。全局属性对吧,在view里边有一个全局属性,路由的全局属性ru,那rue这个代表的什么呢?这个代表的。是啊,路由当前这个路由就当前代表的当前这个路由,而加这个是代表路由器可以往路由里边放什么参数的,这咱们两个属性它是可以分开的,这备注当前路由,当前路由里边就有一个pars参数获取参数,那参数获取哪个参数名字就是我们在配置路由的时候,配置路由的时候这里边你起的名字。
14:09
你看获取的ID对吧,那我们就需要在这里边获取这个ID。你看现在是ID点击的时候ID13对吧。ID10ID是不是都可以接收到了?这个。那这会儿我们也能获取到这个代替路由pass这个,通过这个咱们也可以获取这个pass路径嘛,对不对。通过pass也可以获取到这个,这个咱们是用过的,对吧,用过这里边的pass获取录用,现在咱用这个获取这里面的参数,这个参数是一个对象,那我们获取参数里边的ID就可以了,那我们还可以用什么?假如我们还可以用计算属性的方式,比如说。啊,C。用这个计算属性。计算属性,我们有个盖的方法。下一个方法,然后呢,嗯。这里边我们加上。
15:00
这里边比如咱一个给起一个计算属性的属性名,那我们叫什么呢?我们叫做那配置吧,PG配置ID,我们叫做这个属性,然后大括号里边,我们把该的方法放在里边。单气的属性,如果就一个盖的方法的话,因为它可以设值和取值嘛,就一个方法的话,其实我们这么写也可以简写啊,假如说直接获取这个ID,把它直接形成一个方法,那这块就相当于默认形成了一个配置ID的一个计算属性是一样的啊,那我们加括号。如果有钙的方法,可以把属性名变成形成一个方法东西只有一个,如果有两个啊,我们的写两个,怎么还有个。写啊取掉了,然后我们这里边计算属性返回什么呢?在这里边如果我用参数的话,是不是就得这次了,你看在date里边或者是方法里边用的时候,都是这次访问V里边的全体属性,然后有个do有两个,一个T,一个T,这两个文T这个。pas.id获取到这个,那我们直接返回这个属性,那我们在页面里边就可以直接有这个属性了。
16:02
边一我这里边大概写,你看就可以直接用到这个计算属性page ID这样的,如果有两个就可以简写啊,就是如果只是盖的方法就可以填写这种写法,记得和这种写法是这样的,Pad冒号对吧,有一个属性,然后里边有个盖的方法,只不过把这些都缩写了,缩写成上面这种。对,前面我这个应该也讲过不忘对吧,然后你看一下,现在点击的时候,你看可以通过计算属性的方式,通过这种方式你就可以形成一个这样的一个变量,然后这样变量在服务器去获取ID就行了,在页面显示是这样,或者你直接用这个都可以对吧?那现在如果我连接数据库到连接数据库通过接口请求给接口里边传过去一个ID,传1ID是不是就能获取这篇文章,然后获取这个文章的数据,你在就声明是在这里边去声明这文章的样子就可以了吗?就可以点击文章。这是咱做项目时候再跟你一起创新。这样的一个方式。那。这是一种存餐的方式,那有的说了,还有另外一种,这存一个是比较合适的,对不对,那咱们还有问号那种查询自符串的方式,那个我怎么存呢。
17:08
那个怎么团呢,你比如说我这里边儿来做一个。呃,文章吧。假如说这存插数,咱就放在这一节课里面一起讲啊,这是存一个的啊,如果存多个,咱们会用到这种方式,不用道这种方式查询字符串的这种方式,那这种方式呢,路由你就不用配置了,比如说我下边我们在。因为两个肯定不能合在一起用的,所以呢,我分开去使用,在呃路由里边我们再做一个。我们叫做啊文章。AR,记得文章吧,然后这块写上我的文章A。第二下这个文章,当然这个文章我们没有这个组件,对吧,我们新建一个。啊,文章。
18:00
比如我的A。在这里边这边写,然后文字啊,咱先不写,这会先不是重点,你看文章,然后我们在这个位置。在。上面我们得把它加载过来,对吧,引入进来。A,这块我们加上。嗯。这个。怎么样,这样的话我们就有了,你看路由里面,路由里边我们什么也没有配置,不像这样我们起的一个变量对吧,因为起变量在路由里边,一旦pass里边加值了,这个变量还是变化的,所以叫动态路由嘛,这种还是传统正常的路由什么都没动,什么都没动的时候,那我们在传值的时候使用的时候呢,就可以给它传递很多参数,你比如说嗯,这个是页面,这个我们先先关掉啊。先关掉,我们找到这个文章里边,嗯,里边吧,当然我就不学不写循环了,你也可以把它写成这种循环,我现在就用两篇文章固定去写吧。
19:04
不能去写。你看那下边我们改个名。嗯,文章。往下说法。文章一这块来一个。文章二,但是呢,我们传递的时候,这块到哪去啊?AA到这个地方,这块A到这个地方。你看。点击文章的时候,这个路由看一下我们能不能过来,到这里边儿来。这是文章一文,点击文章的时候。三这没问题对不对,但是这两个地址是一样的,所以呢,两个都变红了对吧,那我这里边全参数,你看问号这种方式存,比如说名字等于。111,然后安德福年龄等于十岁。你看我鼠标放到这个,点击这个时候,你看是不是这样的存参数。
20:02
对吧。第二次参数。可以这么传,那除了这么传,这么传参数我们看一下。不管怎么样,是把参数给我们传过去,对不对,通过这种方式,但这种方式传的话,我们一般的这种多数据是对象的形式,所以我们还有一种传的方法什么呢?在这。加上。一个冒号,然后里边变成一个全部通通给你重写啊,加上冒号之后我再加上。大括号是不是就是对象的格式啊,也就是这种方式是给我们可以给我们变成对象的格式去传的,那对象格式传我们就可以传pass冒号对吧?传什么呢?比如说这里边找到斜杠user下边的A,你看是可以这么算的,我们现在刷新一下。你看点击这个文章二。啊,必先闭果颜色,你看一下点击这个是不是一样可以传递,和我正常写的是一样的,所以呢,这块写格式可以通过pass这样去写格式,这是一种形式,对吧,原来这么写也是一种格式,那如果你这块可以通pass,那既然把它改成对象了,那目的就是我想什么使用多个值,不仅我转到这个位置,我还需要给他传递一个对象。
21:12
那传递下边就是Q查询字符串,查询字符串还是一个对象格式,那这里边我们就可以写阶层格式去传了,如果你这里边有变量直接是对象,那我们直接把对象,比如说IM,假如是便利啊,IM直接放在这块对吧,那便列每个对象直接放在这块就可以作为插数传,所以很方便使用这种格式啊,当然了,咱们现在没有没有去变列数据模拟写的,那我就这样去给你写,这种可以传,这种也可以传看一下啊,那我这里边写上名字是。啊。假如说呃阿吧,随便写个年龄是100岁,看发现一下,保存一下,现在我点击文章二,你看是不名字,哈喽,年龄等于什么?当然这几张。太小你写过来对不对,那你对象里边写多少数据是都可以,所以这两个你看。
22:00
对吧。那有时候这俩怎都是红色呢,因为你现在点的参数不点的都是这个吗?因为路径是同一个对吧,你可以通过不同的参数去判断吗?但是他现在这儿还没写那个不同参数,那这种方式咱们怎么获取呢?一样了。跟我们呃,配置里边写法是一样的,如果我们想就是文章的验证吧。二然后在里边加上文章的属性值,你看我怎么获取啊,可以通过这个里边的。当然你在页面模板里边写,你得用差值的方式接收参数拉符,还是ru rue还是这个,它里边有一个就是qqu ery啊查询字符串了,它也是个对象,那就是参数的对象里边的获取里边name,然后我们前面可以加一个。呃,Name冒号。词第二,然后我们还可以获取到年龄,当然里边再传其他的值,那你就可以写其他的值。
23:07
NAME11,这是对对点这个的时候哈100。就可以了,所以多个参数团的时候都从这里边传名字ID,那这个不是动态路由的话,这就存查询自出参数的情况,因为我们在这个里边。把这个pass改变了,把路由变成动态的了,对吧,是这样的方式。当然这两种分摊的话,你在任何这里面都可以存,在任何每个里边都可以去存,然后你在使用地方去接收就行了。当然我们如果这是一个按钮参数的话,比如说我们不是用的。嗯,就像我们前面这个按钮一样,假如说我下边用的在。一会这边应该还能放下你,比如说我不是Li。这块。行吧。二。
24:00
第括号,假如说BOT to,我们用按钮的方式对吧?文章三用这种方式我们去点击的时候也是一样的,在这里边我们是不是得用用那个click click点击的时候对不对,然后你通过这个时候咱们用的什么,就是ROT看好了啊,点击的时候它本身这里边就可以写变量嘛,对不对?用这个是路由器,路由器里边咱们说了往push pass是通过这个去传递参数的,这前面都写过的,那如果你传一个根,它就转到根下边去了,对不对?那你传这里边UC下边的AR tle,那就转到这来了。那通过这种传的方式呢,它也可以用对象的格式,比如说这块我们加上大括号。把这块加上大括号。是一个对象格式,是一个对象格式,自己做就不用做,不用这个,呃,Root link的时候你也可以这么做啊,然后pass对象格式,存这个,你看点击这个传那后边一样文章三。你看当然只是这边我们没有存参数,所以这边没接到这边,那这边呢,那我们有没有第二个参数呢?比如说qqu查询字段,这里边我们传一个内。
25:08
这块是wordd word,然后年龄年龄99,你看用自己定义的,我路由里加的和那个to用法这样的都是支持这样对象的格式保存一下,正在你看word年龄99是不是一样可以传过来上面一样可以,就是你不用这种方式的时候,用自定义这种方式也是可以的。好,这就是我们两种传参的方式,那这种传参呢,是在路由里边进行改变了,所以是动态路由,这种呢,可以传多个对吧,就是正常的配置。智能配置接收的时候呢,都是用这个参数的,动态路由的方式是用这个参数的方式,那这种查询自动串的方式都是用入串里边。注册里边Q查询字串,因为本身这种格式就是查询问号格式,就查询字串吗。所以呢,路由用用起来这种,呃,跟我们后端用的路由的格式什么的都是一样的,直播前的路由写法不一样的,配置的方式不一样啊现在。
我来说两句