在 vue 中想要跳转到不同的 URL难免需要用到传递参数，由于对 vue-router 不是很了解，所以通过查看对应的官方文档，我总结了一下。vue-router 传参方式大致分为两大类，一种是声明式导航 <router-link>，另一种是编程式导航 router.push，而编程式导航传递参数又分为两种类型，字符串和对象类型。下面分别从声明式导航和编程式导航说明这两大类的用法和注意事项。

方式一：编程式导航

1、字符串方式

字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数，例如：

this.$router.push("home");

2、对象方式

如果想要传递参数，主要就是以对象的方式来写，此方式分为两种：命名路由、查询参数 。 命名路由 命名路由传递参数需要使用 params 来传递，这里一定要注意使用 params 不是 query。目标页面接收传递参数时使用params，但值得注意的是当我们使用命名路由这种方式传递参数时，在目标页面刷新时，数据会丢失。例如：

//发送传递的参数 userId
this.$router.push({ name: 'id', params: { userId: 123456789 }});

//接收传递的参数 userId
this.$route.params.userId //输出：123456789

查询参数 查询参数其实就是在路由地址后面带上参数和传统的url参数一致的，传递参数使用 query 而且必须配合 path 来传递参数而不能用 name，目标页面接收传递的参数使用 query。但值得注意的是 name 配对的是 params，path 配对的是 query，在目标页面刷新时，数据不会丢失。例如：

//发送传递的参数 userId
this.$router.push({ path: '/user', query: { userId: 123456789 }});

//接收传递的参数 userId
this.$route.query.userId

方式二：声明式的导航

由于声明式导航和编程式的基本一样，这里就不在过多介绍了，例如：

1、字符串

<router-link to="news">click to news page</router-link>

2、命名路由

<router-link :to="{ name: 'user', params: { userId: 123456789}}"></router-link>

3、查询参数

<router-link :to="{ path: '/user', query: { userId: 123456789}}"></router-link>

注意

路由传递参数和传统传递参数是一样的，命名路由类似表单提交的方式而查询类似于url传递的方式。