vue-router-参数传递

vue-router-参数传递

准备工作

第一步:创建新的组件Profile.vue
第二步:配置路由映射
第三步:添加跳转的< router-link >

传递参数的方式

传递参数主要有两种类型:params和query

params的类型:
配置路由格式:/router/:id
传递的方式:在path后面跟上对应的值
传递后形成的路径:/router/123 , /router/abc

query的类型:
配置路由格式:/router,也就是普通配置
传递的方式:对象中使用query的key作为传递方式
传递后形成的路径:/router?id=123, /router?id=abc

如何使用他们呢?也有两种方式:< router-link >的方式和JavaScript代码方式

URL:协议://主机:端口/路径?查询(query)
URL中一般会将端口省略,
URL:http://localhost:8080/路径?查询(query)
协议一般有:http,tcp等
scheme://host:port/path?query#fragment

$ router和 $ route是有区别的

任何一个组件里面拿到的$router都是一样的,可以通过它调用一些方法:back、forward、replace、pushState等。
可以通过 $route拿到当前处于活跃的路由信息比如:params、query、path

vue-router-参数传递