vue路由参数校验_Vue学习笔记之动态路由的参数传递应用及技巧

路由的参数传递：

①通过params的类型

· 配置路由格式：/router/:id

· 传递的方式：在path后面跟上对应的值

· 传递后形成的路径：/router/list，/router/profile

这个就是前两篇中提到的"动态路由"中有应用过这个方法：

②通过query的类型(对象方式)：

· 配置路由格式：/router，也就是普通的配置方式配置路由即可

· 传递的方式：对象中使用query的key作为传递方式

· 传递后形成的路径：/router?id=list，/router?id=profile

正常配置路由的内容就不再重复了，在界面显示的地方需要通过一个对象来实现：

然后对象里面通过query来进行参数的传递：

profile

生成的URL地址为：http://localhost:8080/profile?name=myname&age=16

PS：注意to前面要通过v-bind来绑定变量；

query里面也是一个对象，通过给对象里面的key赋值；

URL的组成： 协议：//主机：端口/路径?查询(query) #片段

scheme://host:port/path?query#fragment

最后通过$route.query在界面上打印出query的信息：

同时，我们也可以通过代码来实现页面的跳转及参数的传递：

然后通过实现点击动作完成对应组件的切换：

PS：replace里面的参数根据配置可以直接拼接为路径，如上图中的User的URL路径；也可以是对象，如上图中的profile的URL中赋值的是一个对象。