Vue学习笔记之动态路由的参数传递应用及技巧
路由的参数传递:
①通过params的类型
· 配置路由格式:/router/:id
· 传递的方式:在path后面跟上对应的值
· 传递后形成的路径:/router/list,/router/profile
这个就是前两篇中提到的"动态路由"中有应用过这个方法:
②通过query的类型(对象方式):
· 配置路由格式:/router,也就是普通的配置方式配置路由即可
· 传递的方式:对象中使用query的key作为传递方式
· 传递后形成的路径:/router?id=list,/router?id=profile
正常配置路由的内容就不再重复了,在界面显示的地方需要通过一个对象来实现:
然后对象里面通过query来进行参数的传递:
<router-link v-bind:to="{path: '/profile',query: {name: 'myname', age: '16'}}" >profile</router-link>
生成的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中赋值的是一个对象。