Vue中的路由传参的常用方式

 

在父组件中的router-link中的name值对应 index.js 路由文件中的路由匹配规则中的name值，（name值对应关系起主导作用，如果在router-link中还写有path会被忽略），此时能够完成最基本的路由跳转。

• params对应post方式的传参，所以如果需要通过路由传递参数，只需要在router-link中添加params属性，将需要传递的参数填入，并且在路由规则中给path路径后，以  /:value 的方式为路由传递的参数占位，此时的path路由地址中的占位符会读取你在router-link中传递的对应名称的数据。
• query对应get方式的传参，并且在路由规则中给path路径后，以  /:value 的方式为路由传递的参数占位，此时的path路由地址中的占位符会读取你在router-link中传递的对应名称的数据，同时它会以 ?index=value 的url后缀的形式同时表现在url地址中。

params和query这两种形式都可以传递参数，区别就在于query会把数据表现在url地址中，两种方式的取值方式分别为$route.params和$route.query。

 

 注意：如果在路由匹配规则中的路由地址没有完整的带参的地址，此时初始params 会被加载，但是刷新页面后params数据会被赋为null，query 不回出现这种情况。

解决办法：

1、常用的router-link中提供路由的 name值来查找路由地址，所以在路由匹配规则中添加完整的参数即可。 

 

2、如果不是使用name查找路由对应关系的，例如直接书写path的，则需要在router-link和路由匹配规则中带有完整的路由参数

 

深入了解query和params的使用区别