Vue使用日记（25）：vue-router详解（6）——传递参数

路由传参

1、传递参数

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

params的类型：

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

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

传递后形成的路径：/router/123，/router/abc

query的类型：

配置路由格式：/router，也就是普通配置

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

传递后形成的路径：/router?id=123，/router?id=abc

如何使用它们呢? 也有两种方式：的方式和JavaScript代码方式。

举例如下

params类型的方式在动态路由一篇博客里其实已经说过。

的方式：

说明：以前动态路由的params类型方式其实也可以写成对象的key形式，指定path。

JavaScript代码方式

query类型的传递参数，在路由切换时浏览器的url展示如下： 

2、获取参数

获取参数通过$route对象获取的。

在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。

通过$route获取传递的信息如下：

3、$route和$router的区别

$route和$router是有区别的

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法；

$route为当前router跳转对象，当前活跃的对象，里面可以获取name、path、query、params等。

可以看下VueRouter的源码：